ブートストラップ流体コンテナ

Question

イムブートストラップフレームワークの流体コンテナに関するクエリを使用して、正しい方向のポイントの後。私は作成しようとしているもののビジュアルを付けました。私は2列の2つの流体列が必要ですが、私は標準的なコンテナのルールに保持するためのコンテンツが必要です。私は、複雑なCSSの背景や勾配がなければ、できるだけシンプルにしたい。

これは簡単なクエリです。私はこれまでにブートストラップでこれを行う必要性に遭遇したことはありません。

Answer 1

全ての測定は、パーセントで作られているので、これは可能ではないので、それらが挿入されている親コンテナに対するものです。

私が提案するのは、実際に滞在したい場所に列を配置し、この実際のコンテナを絶対位置にし、他の茶色と青色で浮かせることです。

Answer 2

Iは、通常のブートストラップ容器と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