Html 内联单选按钮引导程序的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34883904/
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
Label for Inline Radio buttons bootstrap
提问by
I was gold-plating the signup page by adding labels above each field when suddenly:
当突然出现以下情况时，我通过在每个字段上方添加标签来为注册页面镀金：
It worked fine but not with radio buttons. I'm relying on Bootstrap 3 and I think this can be solved without extra CSS but just with right nesting of Bootstrap classes. Right?
它工作正常，但不能使用单选按钮。我依赖于 Bootstrap 3，我认为这可以在没有额外 CSS 的情况下解决，但只需正确嵌套 Bootstrap 类。对？
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label for="input-password">Password:</label>
<input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
</div>
<div class="col-sm-3">
<label for="input-confirm-password">Confirm Password:</label>
<input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="input-address">Address:</label>
<input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
</div>
</div>
<label class="row">Gender:</label>
<div class="form-group">
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-male" value="Male" type="radio" />Male
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-female" value="Female" type="radio" />Female
</label>
</div>
</div>
<div class="form-group">
<label>Account Type:</label>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div>
</form>
I tried 2 different placement of the elements to resolve this issue as you can see but it didn't work.
如您所见，我尝试了 2 种不同的元素放置来解决此问题，但没有奏效。
I even tried putting a divaround each set of the radio buttons and then gave a labelfor it but that didn't work either.
我什至尝试div在每组单选按钮周围放置一个，然后给label它一个，但这也不起作用。
回答by
You can do it this way:
你可以这样做：
<div class="form-group">
<div class="col-sm-6">
<label for="input-type">Account Type *:</label>
<div id="input-type" class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div
</div>
</div>
Do the same for the other radio buttons group.
对其他单选按钮组执行相同操作。
Explanation: The col-sm-6of the outer divis now 100% and can be divided 50:50 by col-sm-6and col-sm-6
说明：col-sm-6外面的div的现在是 100% 并且可以被 50:50 除以col-sm-6和col-sm-6
