Штабелирование столбцов в бутстрапе 3

Question

Как соединить два столбца внутри столбца в Bootstrap 3?

Меня не интересует отзывчивость. Это просто для прототипа, и мне нужно, чтобы два divs складывались друг над другом внутри столбца.

Вот скрипка. Это две сложенные серые столбцы слева: http://jsfiddle.net/frankDraws/6xyqkLgw/7/

Кроме того, я заметил, что есть прокладка с обеих сторон. Как я могу избавиться от этого?

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-lg-3"> 
     <div class="s2-top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, voluptatibus, eius eaque impedit officiis excepturi necessitatibus maiores est distinctio facere. Itaque, id earum accusamus adipisci deserunt veniam porro ab voluptates.</div> 
     <div class="s2-bottom"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, beatae, facere numquam recusandae inventore nihil veritatis corrupti quaerat vitae quasi harum in provident ea molestias dolorum nemo magni! Quaerat, officiis.</div> 
    </div> 

    <div class="col-lg-3 "> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, esse neque aspernatur quidem inventore harum totam odit voluptatem impedit doloribus accusantium consequuntur vero possimus dolor quod eius voluptatum numquam perspiciatis. 
    </div> 
    <div class="col-lg-6"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, at, itaque, nemo nobis nesciunt quidem corporis blanditiis reiciendis mollitia deserunt dolorum odio perspiciatis tempora repudiandae et corrupti impedit ducimus aspernatur? 
    </div> 
</div> 

.s2-top { 
    height: 100px; 
    background-color: #ccc; 
    width: 100%; 
    overflow: hidden; 
} 
.s2-bottom { 
    height: 300px; 
    background-color: #aaa; 
    overflow: hidden; 
} 
.container-fluid .col-lg-3:nth-child(2) { 
    background-color: purple; 
    height: 400px; 

} 
.container-fluid .col-lg-6 { 
    background-color: green; 
    height: 400px; 
} 

Answer 1

столбцы показывают вверх полную ширину, потому что вы используете col-lg-3 и ширина окна в jsfiddle настолько узок. Измените каждый col-lg-3 на col-xs-3, и вы снова увидите столбцы.

Если вы хотите удалить прокладку, добавьте CSS как .col-xs-3 { padding: 0; } (но вы можете захотеть прокладки, как только они снова будут столбцами).

http://jsfiddle.net/6xyqkLgw/8/