Bootstrap 4 如何给列添加间距？是否可行？

Question

我一直在搜索答案，但是关于在BS4中添加栅格间隔的问题，我似乎找不到任何答案。我找到的所有文章都在讨论如何在BS3中添加栅格间隔。即使是BS4文档也提到了如何删除栅格间隔，但据我所知，BS4中没有现成的栅格间隔组件，对吗？

那么，有没有可能添加等宽的栅格间隔而不会导致列断裂和换行呢？如果可以，那么你如何实现它，而又不影响弹性盒子布局呢？

我有一个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 gutter的含义，经过进一步的调查，我成功地找到了解决问题的方法。

在这里添加了一个JsFiddle，供需要类似解决方案的人参考。

再次感谢协助。

此致，敬礼 -B.

- Lewis

---

我猜你说的是作为边距而不是填充的排水沟？ - Slipoch

我不确定我理解这个问题。Bootstrap已经有一个“gutter”，它在列之间创建间距...使用填充。然而，由于背景颜色在列上而不是列内容上，所以在您发布的代码中，这个间距并不明显：https://jsfiddle.net/1zab595j/ ... 另外，在v3和v4之间没有间距差异（仍然是30px填充），因此所有旧答案都是相关的：https://stackoverflow.com/questions/18765629/ - Carol Skelly

我现在明白自己误解了这个概念。感谢提供指引。为了澄清，我希望每列周围都有相等的间距，不会使得列中的内容偏移或导致列提前断行。感谢澄清。 - Lewis

Answer 1

我认为你对槽板产生了误解。Bootstrap 3和4中，列之间已经有30像素的槽板。你代码中的问题是在使用带有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>

- Aryan Twanju

---

谢谢您澄清，我现在明白我误解了 gutter 的含义。 :) - Lewis

很高兴能够帮助。继续编码。 - Aryan Twanju

Answer 2

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

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

边框白色

实际上并不会创建空间，但会在列之间产生空间的效果。只有在有背景颜色的情况下才有效。

- mrpeebs