引導流體容器在正確的方向上自舉框架流體容器的查詢的點之後

Question

林。我附加了我想要創建的內容的視覺效果。我需要兩列兩列的流體，但我需要遵守標準容器規則的內容。我想保持它儘可能簡單，沒有複雜的CSS背景或漸變。

林希望這是一個簡單的查詢。我從來沒有遇到過需要使用bootstrap做到這一點。

Answer 1

這是不可能的，因爲所有的測量是在百分比製成，因此它們相對於被插入的父容器。

我的建議是放在哪裏，你想真正留柱，然後將使這個真正的容器是絕對位置，浮於其他棕色和藍色。

Answer 2

我會使用通常的自舉容器和col-*然後使用絕對位置僞元件用於彩色塊背景..

HTML

<div class="container border"> 
    <div class="row"> 
     <div class="col-sm-12"> 

     </div> 
    </div> 
    <div class="row margin-0"> 
     <div class="col-md-6 a"></div> 
     <div class="col-md-6 b"></div> 
     <div class="col-md-6 c"></div> 
     <div class="col-md-6 d"></div> 
    </div> 
</div> 

CSS

.a:after { 
    margin:0 15px 15px; 
    position:absolute; 
    content:""; 
    display:block; 
    background:#9999cc; 
    top:0; 
    right:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 
.b:after { 
    margin:0 0 15px 0; 
    position:absolute; 
    content:""; 
    display:block; 
    background:#aa99cc; 
    top:0; 
    left:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 
.c:after { 
    margin:0 15px 0; 
    position:absolute; 
    content:""; 
    display:block; 
    background:#cc2299; 
    top:0; 
    right:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 
.d:after { 
    margin:0;  
    position:absolute; 
    content:""; 
    display:block; 
    background:#aaeecc; 
    top:0; 
    left:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 

http://www.codeply.com/go/OAdlxM3jKb