如何在 Bootstrap 中的内容框之间添加空格

Posted 2023-03-05

【中文标题】如何在 Bootstrap 中的内容框之间添加空格

【英文标题】：How to add space between content boxes in Bootstrap

【发布时间】：2016-02-11 18:20:27

【问题描述】：

现在我在 Bootstrap 中有一行三个框，如下所示：

<div class="row">
<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>

<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>

<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>
</div>

我的自定义 CSS 更改内容框的大小并添加边框，如下所示：

.pathBoxMain 
border: 5px solid black;
padding: 10px 0px 0px 0px;
height: 175px;

所有框都紧挨着出现，边框相互接触，我正在尝试在框之间添加一些空间，这样就不会发生这种情况。我尝试过的所有操作（调整框的宽度、更改边距、在现有框之间添加空列）都更改了框的对齐方式，因此它们不再在整个行中居中。

有没有办法在内容框之间添加空间，同时保持框的居中间距？

【参考方案1】：

.pathBoxMain 
  border: 5px solid black;
  margin: 10px 0px 10px 0px;
  height: 175px;

margin 属性可能就是你要找的

【参考方案2】：

使用margin: top right bottom left。见documentation 所以你必须添加类似的东西。

margin: 10px 0 10px 0;

这将在顶部添加 10 个像素，在底部添加 10 个像素。

.pathBoxMain 
 border: 5px solid black;
 padding: 10px 0px 0px 0px;
 margin: 10px 0 10px 0;
 height: 175px;

【讨论】：

我认为他试图在盒子（行）的顶部和底部之间留出空间。

【参考方案3】：

由于引导程序使用 box-sizing: border-box，margin 不包含在 col-lg-4 宽度中。但是，您可以覆盖该宽度并为该行中的每个第二个元素添加一些边距，例如：

.col-lg-4
    width: 32% !important;


div:nth-of-type(3n+2)
    margin-left: 2%;
    margin-right: 2%;


/* (32% width * 3 elements in a row) + 2% margin left and right = 100% width */

Bootply