Bootstrap：自动排列没有偏移的组件

Question

当调整窗口大小以使某些组件不再适合同一条线时，它们会被推到下一行，但带有偏移量。我该如何摆脱它？

  <div class="checkbox-inline">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>  <div class="checkbox-inline">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>

为了澄清，我喜欢这种行为，我只是想摆脱那种偏移。

Answer 1

如果您查看bootstrap.css，那么您将看到以下几行：

.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline {
    margin-left: 10px;
    margin-top: 0;
}

重要的事情是＆＃34; +＆＃34; - 运营商。

.checkbox-inline + .checkbox-inline

这意味着，每个＆＃34; .checkbox-inline＆＃34; -element直接跟随另一个＆＃34; .checkbox-inline＆＃34; -element，其左边的边距为10px。 / p>

所以可能的解决方案可能是css文件的操作。但另一件事，你可以做的是在复选框之间添加空的＆＃34; span＆＃34; -Elements。

<div class="checkbox-inline">
  <input type="checkbox"><label>Check me out</label>
</div>
<span></span>
<div class="checkbox-inline">
  <input type="checkbox"><label>Check me out</label>
</div>

我希望，这很有帮助。