Question

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

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

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

Answer 1

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

Answer 2

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

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

只要列具有相同的高度，您将具有均匀间隔的布局。

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

2 个答案: