将文本输入添加到内联单选按钮

Question

将一条短文本添加INPUT到一行内联单选按钮的Bootstrappy方法是什么？

我已经尝试在<div class="col-xs-2">单选按钮列表的右侧包装,但当然,它将它放入自己的网格空间.

这是我的bootply尝试了一些更多的变种,没有一个获得与水平无线电内联的文本字段的期望结果:http://www.bootply.com/95891

唯一有效的方法是在其上设置显式像素宽度INPUT,但由于窗体的大小较小,因此不会保留在内联行中.

Answer 1

您可以使用.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