twitter-bootstrap 将文本输入添加到内联单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20134255/
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
add text input to inline radio buttons
提问by Graham Charles
What's the Bootstrappy way of adding a short text INPUTto a row of inline radio buttons?
将短文本添加INPUT到一行内联单选按钮的 Bootstrappy 方法是什么？
I've tried wrapping in a <div class="col-xs-2">to the right of the list of radio buttons, but that puts it into its own grid space, of course.
我试过将 a 包裹在<div class="col-xs-2">单选按钮列表的右侧，但这当然会将其放入自己的网格空间中。
Here's my bootply trying a few more variants, none of which get to the desired result of an text field inline with horizontal radios : http://www.bootply.com/95891
这是我的 bootply 尝试了更多变体，但没有一个得到与水平无线电内联的文本字段的期望结果：http: //www.bootply.com/95891
The only thing that sort-of works is setting an explicit pixel width on the INPUT, but that doesn't stay in the inline row as the form is sized smaller.
唯一INPUT可行的方法是在 上设置显式像素宽度，但随着表单尺寸变小，它不会留在内联行中。
回答by zessx
You could use .form-inline, then you won't have to fix any width on your input:text:
您可以使用.form-inline，那么您就不必在您的 上修复任何宽度input:text：
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Amount</label>
</div>
<div class="form-group">
<div class="radio">
<label class="radio-inline control-label">
<input type="radio" id="amount_25" name="amount" value="25" checked="">
.00
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label class="radio-inline control-label">
<input type="radio" id="amount_50" name="amount" value="50">
.00
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label class="radio-inline control-label">
<input type="radio" id="amount_100" name="amount" value="100">
0.00
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label class="radio-inline control-label">
<input type="radio" id="amount_other" name="amount" value="Other: $">
Other: $
</label>
</div>
</div>
<div class="form-group">
<input placeholder="Amount" type="text" class="form-control" id="amount_actual" name="amount_actual" maxlength="5" data-rule-required="true" contenteditable="false">
</div>
</form>
</div>
回答by Abram
For bootstrap 4 you could consider adding a radio input group https://getbootstrap.com/docs/4.1/components/input-group/#checkboxes-and-radios
对于引导程序 4，您可以考虑添加一个无线电输入组https://getbootstrap.com/docs/4.1/components/input-group/#checkboxes-and-radios
