Bootstrap: 无偏移自动排列元件

Question

当调整 window 的大小时，某些组件不再适合同一行，它们被推到下一行，但有一个偏移量。我该如何摆脱它？

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

重要的是“+”运算符。

.checkbox-inline + .checkbox-inline

这意味着，紧跟在另一个“.checkbox-inline”元素之后的每个“.checkbox-inline”元素，其左侧都有 10 像素的边距。

因此，一个可能的解决方案是 css 文件的操作。但您可以做的另一件事是在复选框之间添加空的 "span"-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>

希望对您有所帮助。

Bootstrap: 无偏移自动排列元件

Bootstrap: Auto arrange components without offset

components

twitter-bootstrap