ブートストラップグリッド - 半流体、通常の半分のコンテナレイアウト

Question

私はレイアウトを作成するための助けが必要です。 Check out the image for the wanted layout。緑色の領域はカルーセルを表示し、青色の領域はカルーセルの一部ではありません。

このレイアウトでは、緑色の領域が画面の左に揃えられ、青色の領域がコンテナに保持されていることが重要です。そうしないと、コンテナ流体クラスを簡単に使用できました。

だから誰でも簡単な答えがありますか？

Answer 1

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-8> 
     ... 
     </div> 
     <div class="col-md-4> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-4> 
        ... 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-4> 
        ... 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 2

私はCOL -__- 6つのセルのsollutionを持っている...

HTML：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6 col-z-index-fix"> 
      ... 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-6"> 
        ... 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：あなたが使用する必要がいけない事実

.col-z-index-fix{ 
    z-index: 10; 
} 

。 col-z-index-fixを相対位置/固定/絶対位置を内部の.containerまたは.row divに設定するまで、

Answer 3

これは、流体の半分、半分の流体ではかなりうまく機能します。私の場合、私は左半分の地図をブラウザの端まで持っていきたいと思っていました。右端の連絡フォームになりますが、標準の幅のcontainerよりも幅が広いわけではありません。ここで

HTML

<div class="container-fluid relative"> 
     <div class="row"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-6 absolute left-half" style="background-color: #E2F1FC; height: 400px"> 
         <div id="map-canvas"></div> 
        </div> 
        <div class="col-sm-6 col-sm-offset-6"> 
         <p> 
          Duis at hendrerit erat, non interdum urna. Praesent metus odio, laoreet sed ultrices et, egestas 
          non erat. In tincidunt et purus a convallis. In hac habitasse platea dictumst. Aenean turpis 
          justo, lobortis ac gravida et, sagittis eu est. Pellentesque habitant morbi tristique senectus 
          et netus et malesuada fames ac turpis egestas. Duis convallis est et placerat gravida. Cras quis 
          quam vestibulum, mollis sapien a, mollis libero. Donec ut massa ultricies, porttitor erat quis, 
          pretium massa. Donec placerat egestas pulvinar. 
         </p> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.relative{ 
    position: relative; 
} 
.absolute{ 
    position: absolute; 
} 
.left-half{ 
    left: 0; 
    right: 50%; 
} 

は、あなたがそれを携帯電話でスタックしたい場合は、簡単にメディアの休憩を追加することができますフィドルhttps://jsfiddle.net/JohnHalsey/z3menav7/2/

です。