如何用颜色填充引导3列，而剩余的外部填充

I need to fill the areas marked with red with white color 如何用颜色填充引导3列，而剩余的外部填充

我的工作将使用引导程序3.该网站将主要使用深色背景颜色的网站，但是网站的标题行含一个标志和一个菜单背景颜色应该是白色的。然而！我不希望白色填充整个宽度（一直到“容器”边界）。附图显示了我想要做的事情。该行包含2列，一列是2列，另一列是10列宽。我想用白色填充整行，但我不希望它跨越“填充”或用绿色标记的页边（这些将保持蓝色）。这样做的最佳建议是什么？

好吧，也许我就不好解释，但我给它一个镜头;）

我已经扩大了给出的例子，以更好地展示我想：http://jsfiddle.net/RedRockerSE/47Fsr/

我不能看看如何：background-clip: content-box;这样做？

我希望外部的“填充/边距/排水沟”区域（用下面的箭头标记）填充背景颜色（如果您愿意，不要填充行背景颜色）。 “填充/边距/排水沟” - 列之间的区域应该填充行背景颜色。 enter image description here

来源

2013-09-30 Magnus Jonsson

可以尝试* {保证金：0;填充：0}在CSS样式表 – falguni

对不起，现在还没有明确你想在这里实现什么。在你的JSFiddle中，通过不将白色作为'.row'的背景颜色来摆脱白色，但我认为你正试图实现不同的东西..？ –

我希望行背景颜色为白色，但我不希望它一直展开到标有箭头的外部填充区域。我试过包装列但没有运气。 –

-1

尝试用户.row。没有-排水沟

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/

来源

2015-03-25 09:41:26 BeeSSt

'.no-gutter'实际上并不是我知道的bootstrap中的东西。在你的演示中，删除类没有任何作用。单单将颜色添加到col- *就可以实现您所做的一切。 – WraithKenny

试试这个

<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; 
}

来源

2016-08-12 12:26:50

-1

你可以做到这一点;

[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/

来源

2016-10-18 13:15:03

如何用颜色填充引导3列，而剩余的外部填充

回答

相关问题