etykieta ładowania początkowego obok wejścia

Question

Próbuję umieścić etykietę pola wejściowego obok niej, zamiast nad nią za pomocą programu ładującego. Zawijanie tego w form-horizontal działa, ale tak naprawdę nie jest w formie (tylko wywołanie ajaxowe, które odczytuje wartość). Czy istnieje sposób, aby po prostu przesunąć etykietę po lewej stronie wejścia?

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

skrzypcach jest http://jsfiddle.net/7VmR9/

Answer 1

div jest elementem block, że oznacza to zajmie tyle szerokość jak to możliwe, a element input jest w nim.

Jeśli chcesz label się obok elementu input: albo umieścić label w div lub dokonać div elementu inline-block.

Answer 2

Możesz wziąć pomoc bezpośrednio ze strony, którą podali, dobrze udokumentowanej.

Oto 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

Tak, można to zrobić przez bootstrap struktury kolumnowej.

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

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

Źródło: https://getbootstrap.com/docs/3.3/css/#forms-inline