如何在没有左右填充的情况下为Bootstrap列提供背景？

Question

我有这个Bootstrap列结构：

.container>.row>.col-md-6*2

问题是，我希望这两列具有白色背景，但背景在容器和行的左右上方15像素。 这是我想要实现的图像：

红色的rectnagles在哪里，我想要有白色背景。

这里也是JsFiddle：http://jsfiddle.net/tmdnd9g5/

Answer 1

您可以创建自定义类并将其应用于这些元素并设置

{margin:0;}

或者将自定义类应用于.row元素并将背景设置为白色

Answer 2

通常我做的是制作一个自定义类，然后将其添加到元素中：

.col-no-pad {
    padding-left: 0px;
    padding-right: 0px;
}

然后添加到元素的类属性：

 <div class="col-md-6 col-no-pad">
    Stuff
</div>

Answer 3

问题在于background div中的col-md-#属性具有padding-right: 15px和padding-left: 15px属性。您需要将背景类放在与col-md-#相同的div上。然后用另一个具有相同背景颜色的div包装所有列。

这是你的例子中的JSFiddle。 http://jsfiddle.net/tzw53fj0/ 注意：我使用不同的背景颜色作为视觉辅助的包装。

Answer 4

只需将背景应用于行。

.row {
    background-color:#fff;
    margin-bottom: 100px;
}

http://jsfiddle.net/uu38zjct/