Question

如果我的页面使用Bootstrap类row，col-md-x等来安排内容，那么从语义上讲，在包含整个元素的每个div之间创建距离的正确方法是什么？

我在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>

Answer 4

另一种方法可以实现您的要求，在您的网站的移动版上没有问题，（请记住，margin属性会在移动版本上制作响应式布局，因此您必须在元素上添加一个补充属性，如@media (min-width:768px){ 'your-class'{margin:0}}，以覆盖上一个边距）

是将您的班级嵌套在您的首选div中，然后添加到您的班级您想要的保证金选项

如下例所示： HTML

<div class="container">
  <div class="col-md-3 col-xs-12">
   <div class="events">
     <img src="..."  class="img-responsive" alt="...."/>
     <div class="figcaption">
       <h2>Event Title</h2>
       <p>Event Description.</p>
     </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
</div>

在您的CSS上，您只需在课程中添加边距选项，在此示例中为＆＃34; events＆＃34;像：

.events{
margin: 20px 10px;
}

通过这种方法，您可以在div之间拥有所需的空间，确保您不会在您的网站上制作任何移动和平板电脑版本。

Answer 5

最简单的方法是将mb-5添加到您的课程中。那就是<div class='row mb-5'>。

注意：

mb在1到5之间变化
Div必须具有行类

Bootstrap：在div之间添加间隙

5 个答案: