Question

我在bootstrap中的一行中有三列。我想让整行的背景颜色变白。当我这样做时，该行的填充也会变成白色背景，使行看起来太宽。 我希望颜色仅在列后面，但也在它们之间。这就是我将它应用到整行的原因。

正如您在Bootply示例中所看到的那样 - 我希望白色背景适用于那些白色div和空间（仅在！之间！）。

当我将它应用于bootstrap列时，它们的填充（第一列的左边填充和最后一列的右边填充）也被着色，使得行看起来更宽。将其应用于该行也是如此。

有没有办法让它看起来像我的意图？

Answer 1

我找到了解决方案。您需要一个超出当前行和列的额外行。然后向最外面的行添加15px的填充。这将使其中的所有内容都具有白色背景，不会超出您想要的布局。

HTML：

<div class="container">
  <div class="row outermost">
      <div class="col-xs-12">

            <!-- COLUMNS AND ROWS -->

      </div>
  </div>
</div>

CSS：

.outermost {
   padding-left:15px;
   padding-right:15px;
}

.outermost > .col-xs-12 > .row {
   background-color:white;
}

Answer 2

这利用了使用宽度计算的边框来实现您所寻找的相同效果 http://www.bootply.com/CVbu8QWsXq

Twitter-Bootstrap 3 - 仅在列之间的背景颜色

2 个答案: