在引导程序3中堆积列

如何在引导程序3中的列中堆叠两列？在引导程序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; 
}

来源

2014-09-04 FrankDraws

也许我很疯狂，但两个灰色的div已经堆叠。要删除填充，只需在围绕这两个div的col-lg-3 div上设置一个类并将填充设置为0. – Tricky12 2014-09-04 19:35:57

它们正在堆叠，但它是一种破解。 – FrankDraws 2014-09-04 20:15:24

的列显示出来的全宽度，因为你使用col-lg-3和的jsfiddle窗口的宽度很窄。将每个col-lg-3更改为col-xs-3，您应该再次看到列。

如果你想删除填充，像.col-xs-3 { padding: 0; }添加CSS（但你可能想要填充一次，他们再次列）。

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

来源

2014-09-04 19:38:56

这样做！我应该不断尝试不同的列，我尝试了一些，但留在'col-md-xx'而不是更小的我曾以为他们太小了太空但你证明我错了我很感激它！ – FrankDraws 2014-09-04 20:20:20

在引导程序3中堆积列

回答

相关问题