Comment aligner des étiquettes et des champs en lecture seule dans un formulaire Bootstrap

Question

Dans bootstrap 2, quelle est la méthode recommandée pour aligner des étiquettes et des champs de texte en lecture seule dans un formulaire . L'exemple de code suivant crée des champs mal alignés:

 <form class="form-horizontal">
    <fieldset>
        <legend>Sample</legend>    
        <div class="control-group">
            <label class="control-label">Readonly Field</label>
            <div class="controls">
                Lorem Ipsum and then some
            </div>
        </div>
    </fieldset>
</form>
 

Notez que je peux résoudre ce problème moi-même avec CSS personnalisé. Ce n'est pas le problème. Cela semble ridicule que ce ne soit pas intégré, alors je me sens obligé de négliger quelque chose.

Answer 1

Vous pouvez utiliser l'entrée non éditable

 <span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span>
 

MODIFIER:

À partir de bootstrap 3.0, une classe a été ajoutée pour gérer cette

Lorsque vous devez placer du texte normal statique à côté d'une étiquette de formulaire dans un formulaire horizontal, utilisez la classe .form-control-static sur un <p>

 <div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>
 

Answer 2

Il y a un hack. Vous pouvez utiliser <label> avec la classe "case à cocher"

Dans ton cas:

<div class = "controls">
 <label class = "case à cocher">
     Lorem Ipsum et puis certains
 </ label>
</ div>