引導設計differens顏色

Question

容器流體我想實現如下：

有每邊一個背景顏色的液體容器 - 但分離器應該在內部容器中的兩個的cols。

我試圖在這張照片中描述它。這甚至有可能嗎？

Answer 1

這可以在.container-fluid類之前和之後使用psuedo元素或給出任何其他類名稱。 這裏是代碼筆演示：

`http://codepen.io/duptitung/pen/adNOpV` 

Answer 2

你，你可以給特定顏色的背景圖像，並把它放在特定區域

CSS

.container-fluid{ 
    background:url(//image link//); 
    background-position: // arrange image // ; 
    background-size: auto 100%; 
} 

Answer 3

使用CSS位置和後/前請參見下面的鏈接： Codepen

.container { 
 
    background: #ddd; 
 
    height: 250px; 
 
} 
 
.extra1 { 
 
    height: 250px; 
 
    background: #fff; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 
.extra2 { 
 
    height: 250px; 
 
    background: #000; 
 
} 
 
.extra1:before { 
 
    content: ''; 
 
    background: yellow; 
 
    position: absolute; 
 
    width: 300%; 
 
    top: 0px; 
 
    height: 100%; 
 
    left: -200%; 
 
} 
 
.extra2:before { 
 
    content: ''; 
 
    background: green; 
 
    position: absolute; 
 
    width: 300%; 
 
    top: 0px; 
 
    height: 100%; 
 
    right: -200%; 
 
} 
 
.your-things { 
 
    position: absolute; 
 
    left: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 extra1"> 
 
     <div class="your-things"> 
 
     <p>.col-md-4</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-8 extra2"> 
 
     <div class="your-things"> 
 
     <p>.col-md-8</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>