html - 如何在保留外部填充的同时用颜色填充 Bootstrap 3 列

Question

我正在开发一个将使用 Bootstrap 3 的站点。该站点将主要使用深色背景色，但对于包含徽标和菜单的标题行，背景色应为白色。然而！我不希望白色填充整个宽度（一直到“容器”边界）。附图说明了我想做的事情。该行包含 2 列，一列宽 2 列，另一列宽 10 列。我想用白色填充整行，但我不希望它跨越用绿色标记的“填充”或边距（那些应保持蓝色）。这样做的最佳建议是什么？

好吧，也许我解释得不好，但我会再试一次；）

我扩展了给出的示例以更好地显示我想要的内容：http: //jsfiddle.net/RedRockerSE/47Fsr/

我看不出怎么做：background-clip: content-box;这样做？

我希望外部“填充/边距/装订线”区域（用下面的箭头标记）填充背景色（或者如果您愿意，也不要填充行背景色）。cols 之间的“padding/margin/gutter”区域应该用行背景颜色填充。

Answer 1

尝试这个

<div class="container">
  <div class="row">
    <div class="col-xs-4 bg-color"></div>
    <div class="col-xs-4 bg-color"></div>
    <div class="col-xs-4 bg-color"></div>
  </div>
</div>

CSS代码

body {
  background-color: #f00;
}
.row {
  background-color: #fff;
}
.col-xs-4 {
  background-clip: content-box;
  height: 100px;
}
.bg-color {
  background-color: #ccc;
}

Answer 2

尝试用户 .row .no-gutter

HTML

<div class="container">
<div class="row no-gutter">
     <div class="col-xs-4"></div>
     <div class="col-xs-4"></div>
     <div class="col-xs-4"></div>
</div>

CSS

body {
    background-color: #f00;
}
.col-xs-4 {
    background-color: #fff;
    height: 100px;
}

http://jsfiddle.net/47Fsr/7/

Answer 3

你可以这样做;

[class^=col-].no-space-left {
 padding-left:0;
}

[class^=col-].no-space-right {
  padding-right:0;
}

并添加内部 div 填充；

[class^=col-].no-space-left > div {
  padding:0 15px
  /*padding-right:15px;*/ /*if you want no space between col- */
}

[class^=col-].no-space-right > div {
    padding:0 15px
  /*padding-left:15px;*/ /*if you want no space between col- */
}

http://jsfiddle.net/47Fsr/32/