Przyciski radiowe w bootstrapie.form-horizontal

Question

Trzepię głową w ścianę, próbując uzyskać rozsądne zachowanie z Bootstrapa za pomocą przycisków radiowych wewnątrz .form-horizontal.

Problem polega na ustawieniu przycisków radiowych i ich etykiet w jednej linii, a także wyrównaniu z resztą formularza. Najlepszą udało mi się w ten sposób:

<legend>New user</legend> 
    <form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post"> 

     <div class="control-group"> 
      <label class="control-label" for="user_affiliation">Affiliation</label> 
      <div class="controls"> 
       <input id="user_affiliation" name="user[affiliation]" size="30" type="text" /> 
      </div> 
      </div> 

     <div class="control-group"> 
      <div clas="controls"> 
      <div class="radio"> 
       <label> 
       <input id="user_role_managing_editor" name="user[role]" type="radio" value="Managing editor"> 
       Managing editor 
       </label> 
       <label> 
       <input id="user_role_area_editor" name="user[role]" type="radio" value="Area editor"> 
       Area editor 
       </label> 
       <label> 
       <input id="user_role_author_or_referee" name="user[role]" type="radio" value="Author or referee"> 
       Author/referee 
       </label> 
      </div> 
      </div> 
     </div> 

     <div style="text-align: center;"> 
      <input class="btn btn-primary" name="commit" type="submit" value="Register" /> 
     </div> 

    </form> 

co mnie dostaje to:

Jak widać, radia przyciski są z walnięcie z resztą postaci. Powinny one ustawiać się pionowo w polu tekstowym lub robić coś bardziej sensownego niż ściskać lewą, jakby to była .form-inline.

Każda pomoc zostanie bardzo doceniona.

Answer 1

Dodaj trochę stylu do swojej klasy radio,

.radio { 
    margin-left:180px; 
} 

Sprawdź demo here.

Answer 2

żadne hacki, wystarczy skorzystać z systemu siatki Bootstrap (klasy kol-xx-x), na przykład:

<div class="form-group" > 
    <label for="txt_web" class="col-lg-3 control-label">xxx</label> 
    <div class="col-lg-9"> 
     <input class="form-control input-sm" type="text" name="txt_web" id="txt_web" /> 
    </div> 
</div> 

<div class="form-group" > 
    <label for="txt_web" class="col-lg-3 control-label">xxx</label> 
    <div class="col-lg-9"> 
     <div class="radio">...</div> 
     ... 

    </div> 
</div> 

Answer 3

Brak hacks !, Korzystanie bootstrap2:

<div class="control-group"> 
    <label class="control-label"> User role</label> 
    <div class="controls"> 
    <label class="radio"> 
     <input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked> 
     Managing editor 
    </label> 
    <label class="radio"> 
     <input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor"> 
     Area editor 
    </label> 
    <label class="radio"> 
     <input type="radio" name="user[role]" id="user_role_author_or_referee" value="Author or referee"> 
     Author/referee 
    </label> 
    </div> 
</div> 

Demo : http://jsfiddle.net/GX6q4/1/

Aktualizacja: Oto wersja Bootstrap3:

<legend>New user</legend> 
<form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post"> 
    <div class="form-group"> 
    <label class="col-xs-2 control-label" for="user_affiliation">Affiliation</label> 
    <div class="col-xs-10"> 
     <input class="form-control" id="user_affiliation" name="user[affiliation]" size="30" type="text" /> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="col-xs-2 control-label">User role</label> 
    <div class="col-xs-10"> 
     <div class="radio"> 
     <label> 
      <input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked>Managing editor 
     </label> 
     </div> 
     <div class="radio"> 
     <label> 
      <input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor">Area editor 
     </label> 
     </div> 
     <div class="radio"> 
     <label> 
      <input type="radio" name="user[role]" id="user_role_author_or_referee" value="Author or referee">Author/referee 
     </label> 
     </div> 
    </div> 
    </div> 
</form> 

Demo: http://jsfiddle.net/24sx72mn/1/

Bootstrap 4 wersja:

<legend>New user</legend> 
<form accept-charset="UTF-8" action="#" id="new_user" method="post"> 
    <div class="form-group row"> 
    <label class="col-sm-2 col-form-label" for="user_affiliation">Affiliation</label> 
    <div class="col-sm-10"> 
     <input class="form-control" id="user_affiliation" name="user[affiliation]" type="text" /> 
    </div> 
    </div> 
    <div class="form-group row"> 
    <label class="col-sm-2 col-form-label">User role</label> 
    <div class="col-sm-10"> 
     <div class="form-check"> 

     <input type="radio" class="form-check-input" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked> 
     <label class="form-check-label" for="user_role_managing_editor"> 
      Managing editor 
     </label> 
     </div> 
     <div class="form-check"> 

     <input type="radio" class="form-check-input" name="user[role]" id="user_role_area_editor" value="Area editor"> 
     <label class="form-check-label" for="user_role_area_editor"> 
      Area editor 
     </label> 
     </div> 
     <div class="form-check"> 

     <input type="radio" class="form-check-input" name="user[role]" id="user_role_author_or_referee" value="Author or referee"> 
     <label class="form-check-label" for="user_role_author_or_referee"> 
      Author/referee 
     </label> 
     </div> 
    </div> 
    </div> 
</form> 

Demo: http://jsfiddle.net/p8wyd7s8/1/