html - Bootstrap 4 是否可以向列添加装订线？

Question

我一直在网上搜索寻找答案，但我似乎无法找到有关在 BS4 中向列添加排水沟的答案。我发现任何关于添加排水沟的文章都引用了 BS3。甚至 BS4 Docs 都在谈论删除它们，但据我所知，没有，对吗？

甚至可以添加不会导致 cols 断裂和包装的相等的排水沟吗？如果是这样，您将如何在不弄乱 flex box 的情况下做到这一点？

我有一个 JsFiddle演示我正在尝试添加排水沟的网格。我能得到的任何帮助，或者即使我能指出正确的方向，我也会很感激。

.sec-accent {
  background-color: #fafcf5;
}

.blue {
  background-color: #9999cc;
}

<div class="container">
    <div class="row">
      <div class="col-sm-12 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-8 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-4 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 blue" style="height:500px;">
        Hello World
      </div>
      <div class="col-sm-6 blue" style="height:500px;">
        Hello World
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12 blue" style="height:500px;">
        Hello World
      </div>
    </div>
  </div>

编辑:2018 年 4 月 9 日

我现在可以看到我错误解释了 bootstrap 排水沟的地方，经过更多的挖掘，我能够想出解决我的问题的方法。

Added here in this JsFiddle for anyone looking for a solution like mine.

再次感谢您的帮助。

问候，-B。

Answer 1

我想你对排水沟有误解。 Bootstrap 3 和 4 的列之间都已经有 30px 的间距。您的代码中的问题是您在带有 col-* 的 div 中使用了 .blue 类。类(class)。您需要以另一种方式执行此操作。你应该只留下 col-*类(class)。试试这个代码。

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-8">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-4">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
        <div class="col-sm-6">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="blue" style="height:500px;">
                Hello World
            </div>
        </div>
    </div>
</div>