将文本输入添加到内联单选按钮 [英] add text input to inline radio buttons
问题描述
向一行内联单选按钮添加短文本 INPUT
的 Bootstrappy 方法是什么?
我已经尝试在单选按钮列表右侧的 <div class="col-xs-2">
中包装,但这会将其放入自己的网格空间中, 当然.
这是我的 bootply 尝试了更多变体,但都没有达到与水平无线电内联的文本字段的预期结果:
What's the Bootstrappy way of adding a short text INPUT
to a row of inline radio buttons?
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.
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
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.
You could use .form-inline
, then you won't have to fix any width on your 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>
这篇关于将文本输入添加到内联单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!