输入组插件改变输入组的总宽度

Question

我注意到，当使用带有 Bootstrap 的控件组插件时，控件组的总宽度大于那些没有插件的控件。这种宽度变化似乎不受所用插件数量的影响。

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <form role="form" class="form-horizontal">
    <div class="form-group">
      <label for="inputElementName" class="control-label col-sm-4">Element Name</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
      <div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span>
        <input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementData" class="control-label col-sm-4">Element Data</label>
      <div class="col-sm-6 input-group">
        <input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
      </div>
    </div>
  </form>
</div>

无论插件如何，我如何确保我的控件填充相同的宽度？

Answer 1

.input-group div 应该是其自身元素的一部分，而不是与 .col-xs-6 混为一谈。请记住，.input-group div 正在代替输入控件。所以可以互换使用。

不是这个：

<div class="col-sm-6 input-group">

    <span class="input-group-addon">Every</span>
    <input type="number" class="form-control" />

</div>

这样做：

<div class="col-sm-6 ">
  <div class="input-group">
    <span class="input-group-addon">Every</span>
    <input type="number" class="form-control" /> 
  </div>
</div>

堆栈片段中的演示

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <form role="form" class="form-horizontal">
    <div class="form-group">
      <label for="inputElementName" class="control-label col-sm-4">Element Name</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
      <div class="col-sm-6 ">
        <div class="input-group">
          <span class="input-group-addon">Every</span>
          <input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="inputElementData" class="control-label col-sm-4">Element Data</label>
      <div class="col-sm-6 ">
        <div class="input-group">
          <input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
        </div>
      </div>
    </div>
  </form>
</div>