Question

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

是否可以添加不会导致cols断裂和包裹的相同排水沟？如果是这样的话你怎么能在不搞乱弹性盒的情况下做到这一点？

我有一个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日

我现在可以看到我在哪里错误地解释了引导装载水槽，经过一些挖掘后我能够找到解决问题的方法。

在此JsFiddle中添加了寻找像我这样的解决方案的人。

再次感谢您的帮助。

问候，-B。

Answer 1

我认为你误解了排水沟。 Bootstrap 3和4都已经在列之间有30px的排水沟。您的代码中的问题是您在具有col-*类的div中使用了.blue类。你需要以另一种方式做到这一点。你应该只用col-*类留下那个div。试试这段代码。

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

Bootstrap 4可以在列中添加装订线吗？

1 个答案: