ブートストラップは容器の液体に入れてください

Question

2つの異なるカラムのバックグラウンドを作成したいので、コンテナ流体をセットして2つのカラムを作って別のローを作っています。

I need like this (PHOTO)

は、ここに私のコードのCSS私は白BG行われ、右に私はピンク色をした "左" で

<section id="mid"> 
    <div class="container-fluid mid"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="row"> 
        <div class="col-md-6 left"> 
         <div class="container"> 
          <h2>Inovative macaroons</h2> 
          <div class="media"> 
           <div class="media-left"> 
            <a href="#"> 
             <span class="fa-stack fa-2x media-object"> 
              <i class="fa fa-circle fa-stack-2x bg"></i> 
              <i class="fa fa-tag fa-stack-1x fa-inverse"></i> 
             </span> 
            </a> 
           </div> 
           <div class="media-body"> 
            <h3 class="media-heading">Best Prices</h3> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada et.</p> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="col-md-6 right"> 
         <h2> Specials</h2> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

です。

Answer 1

フレックスCSSを使用してこれを実現します。私はあなたを正しく理解している場合、両方の列がテキストのために最大の高さを持つ1つの列と同じ高さになるようにします。

はその後、左右colomns

<div class="row flex-row"> 
       <div class="col-md-6 left"> 
        <div class="container"> 

・ホープこのことができますを含む行にフレックス行を適用し、あなたのコード内で

.flex-row { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    } 

    .flex-row > [class*='col-'] { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-orient: vertical; 
     -webkit-box-direction: normal; 
     -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
     flex-direction: column; 
    } 

を次のCSSを追加します。