Bootstrap-Label neben Eingabe

Question

Ich versuche, ein Label des Eingabefeldes neben es statt mit Bootstrap setzen. Das Wrapping in form-horizontal funktioniert, aber es ist nicht wirklich in einer Form (nur ein Ajax-Aufruf, der den Wert liest). Gibt es eine Möglichkeit, das Label einfach auf die linke Seite des Inputs zu verschieben?

<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>  

die Geige ist http://jsfiddle.net/7VmR9/

Answer 1

Die div ein block Element ist, das bedeutet, es so viel wie möglich Breite nehmen und das input Element darin.

Wenn Sie wollen, dass die label zum input Element neben sein: entweder setzen die label im div oder div ein inline-block Element zu machen.

Answer 2

Sie können Hilfe direkt von der Website nehmen, die sie zur Verfügung gestellt, gut dokumentiert.

Hier ist die Fiddle with 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> 

Answer 3

Ja, Sie können dies tun, indem Bootstrap-Säulenstruktur.

<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> 

ist hier ein Bootply Demo

Answer 4

<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> 

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