如何用顏色填充引導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列，而剩餘的外部填充

回答

相關問題