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

我在引导中的行内有三列。我想让整行的背景颜色变成白色。当我这样做时，该行的填充也会变为白色背景，使该行看起来太宽。我希望颜色只在列后面，但也在它们之间。这就是为什么我将它应用到整行。Twitter-Bootstrap 3 - 仅在列之间的背景颜色

BOOTPLY EXAMPLE

正如你可以看到，Bootply例子 - 我想要的白色背景应用于之间的那些白色的div和空间（只之间！）他们。

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

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

来源

2014-11-24 Pe-Ter

我已经找到了解决方案同样的效果计算。您需要一个额外的行，它不在您当前的行和列中。然后，您将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; 
}

来源

2014-11-27 13:34:40

这种利用边界是一个与宽度达到你正在寻找 http://www.bootply.com/CVbu8QWsXq

来源

2014-11-24 01:59:36

所以，你说我应该摆脱引导的填充和应用的边界？这与使用Bootstrap的RWD兼容吗？这不会导致问题吗？ – 2014-11-24 02:05:37

在示例代码中，我没有从任何引导元素中删除填充，只是在.row上使用了15px的边框（这会抵消此断点上的15px负边距），如果它变成并在较小的断点处发出问题可以将其包装在媒体查询中，如 @media（min-width：992px）{ .row { background：#fff; border-left：15px绿色固体; border-right：15px green solid; } } – 2014-11-24 02:12:13

它不适合我。边界背后也有白色。 – 2014-11-24 02:18:36

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

回答

相关问题