Boostrap liquid-container nesting issue

Question

У меня есть раздел, который должен быть полной ширины. Хорошо, жидкость-контейнер. Теперь, в этом, мне нужны два colummns, -8 и -4, каждый с другим цветом фона. Хорошо нет проблем.

Теперь дизайн требует содержания в этих колонках (.left и .right), чтобы иметь копию, как если бы это было в .container

Вот мой HTML Snipper

<div class="container-fluid homeBannerCTAs"> 
 
    <div class="row"> 
 
    <div class="col-sm-12 col-md-8 left"> 
 
     <div class=""> 
 
     <h2>Left CTA</h2> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12 col-md-4 right"> 
 
     <div class=""> 
 
     <h2>right CTA</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

и мой снимок sass, который дает высоту и устанавливает цвета bg.

.homeBannerCTAs { 
 
    @include breakpoint(lg) { 
 
    height : 234px; 
 
    } 
 
    .left { 
 
    height : inherit; 
 

 
    background : #004557; 
 
    } 
 
    .right { 
 
    height : inherit; 
 

 
    background : #dfc986; 
 
    } 
 
}

И дизайн часть.

Вот мой полный прототип

http://boilerplate.fls-interactive.com/kffTemplate.php

У меня нет мобильного дизайн еще (да, я знаю), но я предполагаю, это будет стек.

Я, вроде, ударяю головой об этом.

Cheers.

Answer 1

Вам нужно использовать Bootstrap, или вы можете использовать Flexbox здесь? Что-то вроде этого может быть довольно легко достигнуто с помощью Flexbox. Если вы можете использовать Flexbox, дайте мне знать, и я отправлю Codepen.

ОК, что-то вроде

.container { 
    display:flex; 
} 

.left-col { 
    flex: 2 0 auto; 
    padding:20px; 
    background:#CCC; 
} 

.right-col { 
    flex:1 1 auto; 
    padding:20px; 
    background:#999; 
} 

Вот очень простой CodePen:

http://codepen.io/toddsdarling/pen/akgqJy "

Вы можете отрегулировать прогиб каждого контейнера, чтобы занять более или менее комнаты, а также множество высота (и максимальная высота также).

Я делаю это иногда с помощью столбцов, которые я не хочу сжимать за определенную ширину. например, «flex: 0 400px».