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

使用引导程序网格并在小型设备中我有两列之间有一个默认的引导程序空间。你知道如何将相同的空间放在边缘底部，这样两列在垂直和水平方向上都有相同的空间吗？在列之间垂直和水平方向的空间相同

下面是这个例子，没有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; 
}

来源

2017-09-02 JonD

最简单的方法是用[间隔使用情况]（https://stackoverflow.com/questions/43208183/add-spacing-between-vertically-stacked-columns-in-twitter-bootstrap-4/43208888#43208888）不需要额外的CSS。 – ZimSystem

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

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

只要柱子的高度相等，就会有一个均匀分布的布局。

来源

2017-09-02 15:08:16

@JonD，引导4已经间距，可以应用到您的标记将与增加利润帮助实用工具类和填充你的标记，而不必在大多数情况下写任何CSS。这里是间距实用程序类的link以获取更多信息。在这种情况下，您可以在content类的最后一个div上使用mt-5类。得到你想要的结果。请参阅codeply project了解它的实现。

来源

2017-09-02 15:06:26 cwanjt

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

回答

相关问题