étiquette bootstrap à côté de l'entrée

Question

J'essaie de placer l'étiquette d'un champ de saisie à côté de celui-ci plutôt qu'au-dessus en utilisant bootstrap. Envelopper cela dans form-horizontal fonctionne, mais ce n'est pas réellement dans un formulaire (juste un appel ajax qui lit la valeur). Existe-t-il un moyen de déplacer simplement l'étiquette sur le côté 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/

Answer 1

Oui, vous pouvez le faire en amorçant la structure des colonnes.

<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 Démo

Answer 2

En div es un block ce qui signifie qu'il prendra toute la largeur possible et que l'élément input y figure.

Si vous voulez le label pour être à côté de la input soit mettre l'élément label dans le div ou faire le div un inline-block élément.

Answer 3

<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

Answer 4

Vous pouvez obtenir de l'aide directement sur le site Web qu'ils ont fourni, bien documenté.

Voici un lien vers un Jouez avec les css de Bootstrap.

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