Twitter-Bootstrap 3 - 僅在列之間的背景顏色

Question

我在bootstrap中連續三列。 我想讓整行的背景顏色變白。 當我這樣做時，該行的填充也會變成白色背景， 使得行看起來太寬。 我希望顏色僅在列后面，但也在它們之間。 這就是我將它應用到整行的原因。

BOOTPLY示例

正如你在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