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

Dans bootstrap 2, Quelle est la manière recommandée d'aligner les étiquettes et les champs de texte en lecture seule dans un formulaire. L'exemple de code suivant crée des champs désaligné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 la question. Il semble juste idiot que ce ne soit pas intégré, donc je me sens comme si je devais négliger quelque chose.

47
demandé sur Bastian Voigt 2012-03-27 14:08:28

2 réponses

Vous pouvez utiliser l'entrée non modifiable

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

Modifier:

Depuis bootstrap 3.0, une classe a été ajoutée pour gérer cela

Lorsque vous devez placer du texte statique régulier à 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>
85
répondu chris vdp 2013-08-12 20:49:53

Il y a un hack. Vous pouvez utiliser avec la classe "checkbox"

Dans votre cas:

<div class="controls">
 <label class="checkbox">
     Lorem Ipsum and then some
 </label>
</div>
2
répondu XuDing 2013-07-05 10:12:48