Bootstrappy在一行内联单选按钮中添加短文本INPUT
的方法是什么?
我尝试在单选按钮列表右侧的<div class="col-xs-2">
中进行包装,但这当然会将其放入自己的网格空间。
在这里,我的bootply尝试了一些更多的变体,其中没有一个获得了与水平无线电内联的文本字段的预期结果:http://www.bootply.com/95891
唯一有效的方法是在INPUT
上设置明确的像素宽度,但由于表单的大小较小,因此不会保留在内联行中。
答案 0 :(得分:9)
您可以使用.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="">
$25.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">
$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">
$100.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>
<强> Bootply 强>
答案 1 :(得分:0)
对于引导程序4,您可以考虑添加无线电输入组https://getbootstrap.com/docs/4.1/components/input-group/#checkboxes-and-radios