Question

现在我在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;
}

所有框都显示在彼此相邻的边框接触，我试图在框之间添加一些空间，这样就不会发生。我尝试的一切（调整框的宽度，更改边距，在现有框之间添加空列）都会改变框的对齐方式，使它们不再在整个行中居中。

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

Answer 1

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

保证金属性可能是您正在寻找的

Answer 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;
}

Answer 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

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

3 个答案: