Html Bootstrap .form-horizontal 中的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18952153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio buttons in a Bootstrap .form-horizontal
提问by Jonathan
I'm banging my head against the wall trying to get sane behavior out of Bootstrap with radio buttons inside a .form-horizontal.
我正用头撞墙，试图通过.form-horizontal.
The problem is getting the radio buttons and their labels to line up while also aligning with the rest of the form. The best I've managed is this:
问题是让单选按钮及其标签对齐，同时还要与表单的其余部分对齐。我管理的最好的是：
<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>
Which gets me this:
这让我明白：
As you can see, the radio-buttons are out of whack with the rest of the form. They ought to line up vertically with the text-field, or do something more sensible than hug the left as if this were a .form-inline.
如您所见，单选按钮与表单的其余部分格格不入。他们应该与文本字段垂直对齐，或者做一些比拥抱左边更明智的事情，就好像这是一个.form-inline.
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by botero
No hacks!, Using bootstrap2:
没有黑客！，使用 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/
演示：http: //jsfiddle.net/GX6q4/1/
Update: Here is the Bootstrap3 version:
更新：这是 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/
演示：http: //jsfiddle.net/24sx72mn/1/
Bootstrap 4 version:
引导程序 4 版本：
<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>
回答by kurroman
No hacks, you just need to use the Bootstrap grid system (col-xx-x classes), for example:
没有 hacks，你只需要使用 Bootstrap 网格系统（col-xx-x 类），例如：
<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>
