web-dev-qa-db-fra.com

étiquette d'amorce à côté de l'entrée

J'essaie de mettre l'étiquette d'un champ de saisie à côté de celle-ci au-dessus à l'aide de bootstrap. Envelopper ceci dans form-horizontal fonctionne, mais ce n'est pas réellement dans un formulaire (juste un appel ajax qui lit la valeur). Y a-t-il un moyen de déplacer simplement l'étiquette vers la gauche de l'entrée?

    <div class="controls-row">
        <div class="control-group">
            <label class="control-label" for="my-number">ALabel</label>

            <div class="controls">
                <input id="my-number" type="number"/>
            </div>
        </div>
    </div>

Le violon est à http://jsfiddle.net/7VmR9/

csstwitter-bootstrapalignment
12
Jeff Storey

Oui, vous pouvez le faire par la structure de colonne bootstrap.

<div class="form-group">
  <label for="name" class="col-lg-4">Name:</label>
    <div class="col-lg-8">
      <input type="text" class="form-control" name="name" id="name">
    </div>
</div>

Voici un Bootply Demo

12
Dhaval Ptl

La variable div est un élément block, ce qui signifie qu'elle prendra autant de largeur que possible et que l'élément input y figure.

Si vous voulez que label soit à côté de l'élément input: insérez label dans div ou faites de div un élément inline-block.

4
zoran404

Vous pouvez obtenir de l'aide directement du site Web fourni, bien documenté. 

Voici le Fiddle avec Bootstrap css.

<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
  <input type="text" id="inputEmail" placeholder="Email">
</div>

1
user2021917
<form class="form-inline">
    <div class="form-group">
        <label for="my-number">ALabel</label>
        <input type="number" id="my-number" class="form-control">
    </div>
</form>

Source: https://getbootstrap.com/docs/3.3/css/#forms-inline

0
Marco Lackovic