Html 引导：在div之间添加间隙

如果我的页面使用Bootstrap类

行

，

col-md-x

等来安排内容，从语义上讲，在包含整个元素的每个div之间创建距离的正确方法是什么

---

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

在div之间添加一个填充来模拟间隙可能是一种攻击，但是为什么不使用Bootstrap提供的东西呢。这叫做偏移量。但是同样，您可以在custom.css文件中定义一个类（无论如何都不应该编辑核心样式表）并添加类似

.gap

的内容。然而，

.col md offset-*

在大多数情况下为我完成了这项工作，允许我精确地在div之间留出一个间隙

---

至于垂直间距，不幸的是，在Bootstrap3中没有任何内置的设置，所以您必须发明自己的自定义类来实现这一点。我通常会做一些类似于

.top缓冲区{margin top:20px；}

。这就做到了，显然，它不必是20px，它可以是你喜欢的任何东西。

我只需要一个垂直填充实例，所以我在适当的位置插入了这一行，以避免在css中添加更多内容

一种替代方法，可以实现您的要求，而不会在您的网站的移动版上出现问题（请记住，边距属性将阻止您在移动版上的响应布局，因此您必须在元素上添加一个补充属性，如

@media（最小宽度：768px）{'your class'{margin:0}}

覆盖上一页边距）

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

如以下示例所示： HTML

---

通过这种方法，您将在div之间拥有所有想要的空间，确保您不会在网站的移动版和平板电脑版上拦截任何内容。

从Bootstrap v4开始，您只需将以下内容添加到您的

div

类属性中：mt-2（页边距前2）

这将有两个点的最高利润！

---

文档中给出了更多示例：

最简单的方法是将

mb-5

添加到类中。即

注意：

• mb

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

---

难道你不想给

行添加一个边距吗？比如
行{margin bottom:40px；}
？？@m59可能，但不是每行都是如此。我不想弄乱引导CSS属性并更改它们。@Jonathan Lonowski不是为了水平定位吗？@dabadaba然后将您自己的类添加到您想要更改的行中，如
。间隔行
，并为其添加边距。@dabadaba您不是真的指定了fy“垂直”。只是“两个分区之间的间隙”在提到行和列div之后，建议您可以同时使用垂直间距和水平间距。但是，是的，
offset
类只对水平间距有帮助。这就是我要寻找的，Bootstrap已经给了您这样做的功能。但就我所知，offset只帮助水平放置div，而不是垂直放置div实际上，我想在放置在另一个div下面的div之间创建间隙。好的，谢谢你的回答，这就是我要做的。如果我有4个div具有class.col-md-4，并且我想在前3个div之后添加空格，那会怎么样？这很有效。但是一个好的开发人员的惯例是将资产分开保存。最好定义一个类或对di的引用在一个单独的css文件中。相信我，当我这么说的时候，在webdesign中，单例是罕见的！
<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>

.events{
margin: 20px 10px;
}

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