Nút radio trong Bootstrap .form-horizontal

Question

Tôi đang đập đầu vào tường cố gắng để có được hành vi lành mạnh trong Bootstrap với các nút radio bên trong một .form-horizontal.

Sự cố là nhận các nút radio và nhãn của chúng để xếp hàng đồng thời cũng căn chỉnh với phần còn lại của biểu mẫu. Điều tốt nhất tôi đã quản lý là thế này:

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

nào được tôi này:

Như bạn có thể thấy, các đài phát thanh-nút là ra khỏi Whack với phần còn lại của biểu mẫu. Họ nên xếp hàng theo chiều dọc với trường văn bản, hoặc làm điều gì đó hợp lý hơn ôm bên trái như thể đây là .form-inline.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Thêm một số phong cách cho lớp radio của bạn,

.radio { 
    margin-left:180px; 
} 

Kiểm tra demo here.

Answer 2

Không hacks, bạn chỉ cần sử dụng hệ thống lưới Bootstrap (lớp col-xx-x), ví dụ:

<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

Không hacks !, Sử dụng 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/

cập nhật: đây là phiên bản 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 phiên bản:

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