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

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>

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

Input group addons altering the total width of an input group

html

css

controls

twitter-bootstrap

twitter-bootstrap-3

堆栈片段中的演示