etichetta bootstrap accanto all'ingresso

Question

Sto provando a mettere un'etichetta di campo di input accanto ad essa anziché sopra usando bootstrap. Il wrapping di questo in form-horizontal funziona, ma non è in realtà in una forma (solo una chiamata Ajax che legge il valore). C'è un modo per spostare semplicemente l'etichetta sul lato sinistro dell'input?

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

Il violino è http://jsfiddle.net/7VmR9/

Answer 1

Il div è un elemento block, che significa che ci vorranno tanto larghezza come può e l'elemento input è in essa.

Se si desidera che il label di essere accanto all'elemento input: o mettere il label nel div o fare il div un elemento inline-block.

Answer 2

È possibile ricevere assistenza direttamente dal sito Web fornito, ben documentato.

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

Sì, è possibile farlo struttura della colonna 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> 

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

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