Bootstrap：在 div 之间添加间隙

Question

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

我在 div 之间添加一个带有填充的 div 来模拟间隙，这是一个好策略还是有更好的策略？

Answer 1

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

注意：

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

Answer 2

从 Bootstrap v4 开始，您只需将以下内容添加到您的 div 类属性中：mt-2（margin top 2）

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

文档中提供了更多示例：Bootstrap v4 docs

Answer 3

另一种方法来完成您的要求，在您的网站的移动版本上不会出现问题，（请记住，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 上，你只需在你的类上添加边距选项，在这个例子中是“事件”，比如：

.events{
margin: 20px 10px;
}

通过这种方法，您将在您的 div 之间拥有所有想要的空间，确保您不会在您网站的移动设备和平板电脑版本上破坏任何东西。

Answer 4

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

Answer 5

在 div 之间添加填充以模拟间隙可能是一种技巧，但为什么不使用 Bootstrap 提供的东西。它被称为偏移量。但同样，您可以在 custom.css 文件中定义一个类（无论如何您都不应该编辑核心样式表）文件并添加类似.gap 的内容。但是，.col-md-offset-* 大部分时间都在为我完成这项工作，让我可以精确地在 div 之间留出空隙。

至于垂直间距，不幸的是，在 Bootstrap 3 中没有任何内置的设置，因此您必须发明自己的自定义类来做到这一点。我通常会做类似.top-buffer { margin-top:20px; } 的事情。这样就行了，很明显，它不必是 20px，它可以是你喜欢的任何东西。