ツイッターブートストラップでテキストを折り返すためのコンテナ付きフルサイズコンテナ流体

Question

以下の画像のように、ダークライトブルーがブートストラップを使用してフルグリッドを作成するようなものを実現しようとしています。それが残っていると濃い青が右にすべての方法を拡張する必要がありますに

水色のボックス

は、すべての方法を拡張する必要があります。しかし、内容はコンテナにとどまり、コンテナに従って調整する必要があります。

jsFiddle

私のアプローチ：コンテナ内の行の

<div id="wrapper"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
       <div class="scheduler-col"> 
        <div class="title"> 
         <img src="../img/calendar.png" alt="calendar icon"> 
         <h3>Afspraken planner</h3> 
         <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p> 
         <a href="" class="btn btn-dark">maak een afspraak</a> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
       <div class="scheduler-col"> 
        <div class="title"> 
         <img src="../img/calendar.png" alt="calendar icon"> 
         <h3>Afspraken planner</h3> 
         <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p> 
         <a href="" class="btn btn-dark">maak een afspraak</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

だから、私は入れて両方の列：私は次のマークアップの助けを借りて、同じことを達成している

。そして、私はバックグラウンドイメージを常に位置の中心に追加します。しかし、私は個々のセクションに背景色を追加し、1つの背景画像を追加しないことでこれを行いたいと思います。

だから、誰もが配置や背景イメージを使わずにそのようなレイアウトを達成する方法を提案することができます。

CSS：

#wrapper { 
    background: url(img/banner-bg.jpg) no-repeat; 
    background-position: center center; 
    background-size: 100% 100%; 
    background-size: cover; 
} 

Answer 1

これは（前:: ::後の）擬似要素を使って容易に実現することができますブートストラップグリッドに影響を与えずに！それは、擬似要素の代わりに、主要素にではなく、位置決めを必要とする。ここで

は（SCSSで）ソリューションです： http://codepen.io/hellojebus/pen/eZxOGG

#wrapper { 
    overflow: hidden; 
} 

.scheduler-col { 
    position: relative; 
    &:before { 
    position: absolute; 
    content: " "; 
    top: 0; 
    //a very large number for width 
    width: 6000px; 
    height: 100%; 
    } 
    &.is-left::before { 
    //0 - the padding-left/right on bootstrap col 
    right: -15px; 
    background: #f1f1f1; 
    } 
    &.is-right::before { 
    //0 - the padding-left/right on bootstrap col 
    left: -15px; 
    background: #888; 
    } 
    .title { 
    position: relative; 
    z-index: 3; 
    } 
}