Bootstrap положить контейнер в жидкость для контейнера

Question

Я хочу сделать два разных фона колонки, для чего я устанавливаю контейнерную жидкость, делаю две колонки и делаю еще один ряд. Но он не хочет работать.

I need like this (PHOTO)

Вот мой код

<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> 

В "левой" CSS Я сделал белый BG, и в праве я сделал розовый.

Answer 1

Используйте flex css для достижения этой цели. Если я понимаю вас правильно, вы хотите, чтобы оба столбца имели ту же высоту, что и один столбец с наибольшей высотой из-за текста.

Добавьте следующий CSS в коде

.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; 
    } 

Затем примените Flex-строку в строку, содержащей левую и правой colomns

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

Надеется, что это помогает.