web-dev-qa-db-fra.com

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

Dans bootstrap 2, ce qui 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 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 du CSS personnalisé. Ce n'est pas le problème. Il semble juste stupide que ce ne soit pas intégré, donc je pense que je dois oublier quelque chose.

twitter-bootstraptwitter-bootstrap-2
47
batkuip

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 le .form-control-static classe sur un <p>

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

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

Dans ton cas:

 <div class = "contrôles"> 
 <label class = "case à cocher"> 
 Lorem Ipsum puis quelques 
 </label> 
 </div>
2
XuDing