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

时间:2015-09-26 22:32:08

标签: twitter-bootstrap components

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

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

enter image description here

enter image description here

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

1 个答案:

答案 0 :(得分:2)

如果您查看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>

我希望,这很有帮助。