Question

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

＆＃13;

// gulpfile.js
gulp.task('restart', function() {
  server.close();
  spawn('gulp', [], { stdio: 'inherit'});
  process.exit(); // this line needs to be removed
});

process.on('SIGINT', function() {
  setTimeout(function() {
    gutil.log(gutil.colors.red('Successfully closed ' + process.pid));
    process.exit(1);
  }, 500);
});

// Console results:
^C[20:12:12] Successfully closed 67160
[20:12:12] Successfully closed 67151

＆＃13;

无论插件是什么，如何确保控件的宽度相同？

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>

Stack Snippets中的演示

<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>

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

1 个答案:

Stack Snippets中的演示