Html Bootstrap：在 div 之间添加间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20889126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: adding gaps between divs
提问by dabadaba
If my page uses the Bootstrap class row, col-md-xand such to arrange the content, what would be the proper way to create a distance between each div containing a whole element semantically speaking?
如果我的页面使用了Bootstrap类row，col-md-x和这样的内容安排，这将是创建一个包含整个元素语义上讲每个格之间的距离的正确方法？
I am adding a div with a padding between the divs to simulate the gap, is this a good tactic or is there a better one?
我在 div 之间添加了一个带有填充的 div 来模拟间隙，这是一种好的策略还是有更好的策略？
回答by Ali Gajani
Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css(you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-*does the job most of the times for me, allowing me to precisely leave a gap between the divs.
在 div 之间添加填充来模拟间隙可能是一种技巧，但为什么不使用 Bootstrap 提供的东西。这称为偏移量。但同样，您可以在custom.css（无论如何您不应编辑核心样式表）文件中定义一个类并添加类似.gap. 但是，.col-md-offset-*大部分时间对我来说都可以完成这项工作，让我可以精确地在 div 之间留出空隙。
As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.
不幸的是，对于垂直间距，Bootstrap 3 中没有任何内置设置，因此您必须发明自己的自定义类来做到这一点。我通常会做类似的事情.top-buffer { margin-top:20px; }。这可以解决问题，很明显，它不必是 20 像素，它可以是您喜欢的任何东西。
回答by Tony Sepia
Starting from Bootstrap v4 you can simply add the following to your divclass attribute: mt-2(margin top 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>
More examples are given in the docs: Bootstrap v4 docs
文档中给出了更多示例：Bootstrap v4 docs
回答by Kopernikus
I required only one instance of the vertical padding, so I inserted this line in the appropriate place to avoid adding more to the css. <div style="margin-top:5px"></div>
我只需要一个垂直填充的实例，所以我在适当的位置插入了这一行，以避免向 css 添加更多内容。 <div style="margin-top:5px"></div>
回答by Laurent Doda
An alternative way to accomplish what you are asking, without having problems on the mobile versionof your website, (Remember that the margin attribute will brake your responsive layout on mobile version thus you have to add on your element a supplementary attribute like @media (min-width:768px){ 'your-class'{margin:0}}to override the previous margin)
完成您所要求的另一种方法，而不会在您的网站的移动版本上出现问题，（请记住，边距属性会阻止您在移动版本上的响应式布局，因此您必须在元素上添加一个补充属性，例如@media (min-width:768px){ 'your-class'{margin:0}}覆盖之前的保证金)
is to nest your class in your preferred div and then add on your class the margin option you want
是将您的班级嵌套在您首选的 div 中，然后在您的班级中添加您想要的边距选项
like the following example: HTML
像下面的例子：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>
And on your CSS you just add the margin option on your class which in this example is "events" like:
在您的 CSS 上，您只需在类上添加边距选项，在本例中为“事件”，例如：
.events{
margin: 20px 10px;
}
By this method you will have all the wanted space between your divs making sure you do not brake anything on your website's mobile and tablet versions.
通过这种方法，您将在 div 之间拥有所有想要的空间，确保您不会在网站的移动和平板电脑版本上制动任何东西。
