在Bootstrap 3中堆叠列

时间:2014-09-04 19:30:56

标签: twitter-bootstrap

如何在Bootstrap 3中的列中堆叠两列?

我并不关心回应。这只是一个原型,我需要两个div在一列内叠加在一起。

这是一个小提琴。它是左侧的两个堆叠灰色列: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;
}

1 个答案:

答案 0 :(得分:0)

列显示全宽,因为您使用col-lg-3并且jsfiddle中窗口的宽度非常窄。将每个col-lg-3更改为col-xs-3,您应该再次看到列。

如果你想删除填充,请添加像.col-xs-3 { padding: 0; }这样的CSS(但是一旦他们再次填充列,你可能需要填充。)

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