Question

我显然遗漏了一些非常明显的东西，但我想在自举列之间留一个10px的装订线。来自ui-kit，默认情况下有排水沟，要关闭它们，你可以简单地添加类uk-grid-collapse。

开启水槽的引导程序是什么？

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col1">
        <div class="div-content">col 1</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col2">
        <div class="div-content">col 2</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col3">
        <div class="div-content">col 3</div>
    </div>
</div>

Answer 1

只需定义内部div的颜色即可。在这里，我删除了父母的课程并将课程传递给了孩子们的

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12">
    <div class="div-content col1">col 1</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col2">col 2</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col3">col 3</div>
  </div>
</div>

因为bootstrap在col-类中有一个默认的装订线空间，所以请使用它们并将background-color定义为内部div。

左右两侧的默认装订线空间为15px，因此您会看到div之间的默认空间30px。如果您想将该空间更改为10px，只需使用所需空间编写自己的css并覆盖它。

Answer 2

您可以使用引导程序类container-fluid来执行此操作，请使用以下命令更新您的HTML： -

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="container-fluid col1">
           <div class="div-content">col 1</div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="container-fluid col2">
           <div class="div-content">col 2</div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
        <div class="container-fluid col3">
           <div class="div-content">col 3</div>
        </div>
    </div>
</div>

它可能对你有帮助。

Answer 3

如果您希望自定义装订线宽度为10px，则可以使用http://getbootstrap.com/customize/自定义带有您的值的引导程序，或者您可以创建自己的自定义类来覆盖它

Answer 4

如果您想完全去除排水沟，Bootstrap 3在v3.4.0中引入了row-no-gutters： https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters

Bootstrap 3将排水沟添加到网格系统

4 个答案: