Bootstrap Forms＆gt; <输入字段网格问题>仅在附加时有效

Question

今天在我的Bootstrap表格中注意到一些奇怪的东西（v303）。

我将标签设置为使用3列，输入字段使用9列，通常我希望这可以扩展可用空间的全宽。

但是这些字段似乎有自己的想法，并且正在调整自己的宽度......我似乎无法让它们扩展..即使我添加更多列。

奇怪的是，对于我的带有Bootstrap PREPEND字符的字段，它会按预期的那样全宽。

截图：

代码：

<div class="form-group">
  <label class="col-sm-3 control-label">A</label>
  <div class="col-sm-9">
    <div class="input-group">
      **<span class="input-group-addon">@</span>**
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
</div>
<div class="form-group">
  <label class="col-sm-3 control-label">B</label>
  <div class="col-sm-9">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
</div>

Answer 1

您错误地使用了input-group课程。

  

通过在任何基于文本的输入之前，之后或两侧添加文本或按钮来扩展表单控件。将.input-group与.input-group-addon一起使用，可以将元素添加到单个.form-control或附加元素。

http://getbootstrap.com/components/#input-groups

input-group只有在文本框之前和/或之后有其他元素时才能正常工作。因此，从第二个输入中删除封闭的input-group div或在标记内添加一些周围的内容。

<div class="form-group">
  <label class="col-sm-3 control-label">A</label>
  <div class="col-sm-9">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
</div>
<div class="form-group">
  <label class="col-sm-3 control-label">B</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>