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

【问题标题】：Twitter-Bootstrap 3 - Background color only between columnsTwitter-Bootstrap 3 - 仅列之间的背景颜色
【发布时间】：2014-11-27 21:34:40
【问题描述】：

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

BOOTPLY EXAMPLE

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

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

有没有办法让它看起来像我想要的那样？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案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;
}

【讨论】：

【解决方案2】：

这利用了边框与宽度的计算来达到您正在寻找的相同效果 http://www.bootply.com/CVbu8QWsXq

【讨论】：

所以你是说我应该摆脱引导程序的填充并应用边框？这与使用 Bootstrap 的 RWD 兼容吗？这不会造成问题吗？
在示例代码中，我没有从任何引导元素中删除填充，只是在 .row 上使用了 15 px 的边框（这否定了此断点上的 15px 负边距）如果它变成并在较小的断点发出，您可以将其包装在媒体查询中，例如 @media(min-width:992px) { .row { background:#fff;左边框：15px 绿色纯色； border-right:15px 绿色纯色； } }
它对我不起作用。边框后面也有白色。
因为我希望这些边框是透明的，所以绿色仅适用于我希望它更明显的示例。