列之间垂直和水平相同的空间答案

【问题标题】：same space vertically and horizontally between columns列之间垂直和水平相同的空间
【发布时间】：2018-02-11 09:26:23
【问题描述】：

我使用引导网格，在小型设备中，我有两列，其间有默认引导空间。您知道如何为 margin-bottom 提供相同的空间，以使列在垂直和水平之间具有相同的空间吗？

下面是例子，没有margin-bottom，你知道如何给一个margin-bottom或top等于列之间的水平margin吗？

https://jsfiddle.net/wa1cjfn6/

html:

<div class="HomeEvents">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
      <div class="content">
      <h1>
      text
      </h1>
      </div>
      </div>
         <div class="col-sm-6">
      <div class="content">
      <h1>
      text
      </h1>
      </div>
      </div>
       <div class="col-sm-6">
      <div class="content">
      <h1>
      Text
      </h1>
      </div>
      </div>
    </div>
  </div>
</div>

css:

.content{
  border:1px solid red;
  margin-top:15px;
}

【问题讨论】：

最简单的方法是使用不需要额外 CSS 的 spacing utils。

标签： css twitter-bootstrap

【解决方案1】：

@JonD，Bootstrap 4 具有间距实用程序类，您可以将其应用于您的标记，这将有助于为您的标记添加边距和填充，而在大多数情况下无需编写任何 CSS。这是间距实用程序类的link 以获取更多信息。在这种情况下，您可以将最后一个 div 上的 mt-5 类与您的 content 类一起使用。得到你想要的结果。请参阅此codeply project 了解它的实现。

【讨论】：

【解决方案2】：

引导列的样式为padding-left: 15px; padding-right: 15px。因此，两列之间有 30px。

在你的小提琴的forked demo 中，你会看到我将padding-bottom: 30px; 添加到.col-sm-6 类中，这样底部的空间等于两列之间的空间。

只要列的高度相等，您将拥有均匀分布的布局。

【讨论】：