Bootstrap 4 可以在列中添加排水沟吗？答案

【问题标题】：Bootstrap 4 adding gutters to columns is it possible?Bootstrap 4 可以在列中添加排水沟吗？
【发布时间】：2022-02-15 19:52:01
【问题描述】：

我一直在网上搜寻答案，但似乎找不到有关在 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。

【问题讨论】：

我假设您说的是边距而不是填充？
我不确定我是否理解这个问题。 Bootstrap 已经有一个“排水沟”，可以在列之间创建间距......使用填充。但是，这个排水沟在您发布的代码上并不明显，因为 bg 颜色在列上，而不是列内容：jsfiddle.net/1zab595j ...此外，v3 和 v4 之间的排水沟没有区别（它仍然是 30px填充）所以所有旧答案都是相关的：stackoverflow.com/questions/18765629
我现在明白我误解了这个概念的地方。感谢您的指点。为了澄清，我正在寻找每列周围的相等间距，不会偏移列中的内容或导致列提前中断。感谢您的澄清。

标签： html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

感谢您的澄清，我知道我现在在哪里误解了排水沟。 :)
乐于助人。继续编码

【解决方案2】：

我刚刚找到了适合我的解决方案。

<div class="col col-4 col-lg-2 bg-primary border border-white"></div>

边框-白色

实际上并没有创建一个空间，而是给出了列之间的空间效果。仅当您有明显的背景色时才有效

【讨论】：