Bootstrap:在div之间添加间隙

Question

如果我的页面使用了Bootstrap类row,col-md-x和这样的内容安排,这将是创建一个包含整个元素语义上讲每个格之间的距离的正确方法？

我在div之间添加一个填充div来模拟差距,这是一个很好的策略还是有更好的策略？

Answer 1

在div之间添加填充以模拟间隙可能是一个黑客,但为什么不使用Bootstrap提供的东西.它被称为抵消.但同样,你可以在custom.css中定义一个类(你不应该编辑核心样式表)文件并添加类似的东西.gap.但是,.col-md-offset-*对我来说大部分时间都是这项工作,这让我能够在div之间留下一个空白.

至于垂直间距,遗憾的是,没有像Bootstrap 3中那样内置任何设置,所以你必须创建自己的自定义类才能做到这一点.我通常会这样做.top-buffer { margin-top:20px; }.这就是诀窍,显然,它不一定是20px,它可以是你喜欢的任何东西.

Answer 2

从Bootstrap v4开始,您只需将以下内容添加到DIV的类属性中:mt-2(页边距2)

<div class="mt-2 col-md-12">
        This will have a two-point top margin!
</div>

文档中提供了更多示例:Bootsrap v4 docs

Answer 3

我只需要一个垂直填充的实例,因此我将此行插入适当的位置以避免向css添加更多内容. <div style="margin-top:5px"></div>