使用 Bootstrap ,是否可以防止这样的差距: (如果不使所有高度都相同,那只会填补空白..)
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-6">
aaaaaaa<br />
aaaaaaa<br />
aaaaaaa<br />
aaaaaaa<br />
</div>
<div class="col-xs-6 col-lg-6">
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
</div>
<div class="col-xs-6 col-lg-6">
cccccccc<br />
</div>
<div class="col-xs-6 col-lg-6">
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
</div>
<div class="col-xs-6 col-lg-6">
eeeeeeee<br />
</div>
</div>
</div>
这里有一个可以使用的 jsfiddle:
最佳答案
如何将彩色 div
包装成两列并将它们堆叠在一起。
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-6" style="padding: 0;">
<div style="background: red; padding: 0 15px;">
aaaaaaa<br />
aaaaaaa<br />
aaaaaaa<br />
aaaaaaa<br />
</div>
<div style="background: blue; padding: 0 15px;">
cccccccc<br />
</div>
<div style="background: yellow; padding: 0 15px;">
eeeeeeee<br />
</div>
</div>
<div class="col-xs-6 col-lg-6" style="padding: 0;">
<div style="background: green; padding: 0 15px;">
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
bbbbbbbb<br />
</div>
<div style="background: purple; padding: 0 15px;">
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
dddddddd<br />
</div>
</div>
</div>
</div>
您可以在 http://jsfiddle.net/urc8yev5/ 上看到一个工作演示
为了优化考虑对具有相同样式的元素使用 css 类。
关于css - 使用 bootstrap 防止空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26329638/