用bootstrap防止空洞

时间:2014-10-12 20:27:58

标签: css twitter-bootstrap

使用bootstrap,是否可以防止这样的间隙: (没有使所有高度相同,这只会填补空白......)

enter image description here

<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>

这里有一个与之合作的小提琴手:

http://jsfiddle.net/DTcHh/1438/

1 个答案:

答案 0 :(得分:0)

如何将彩色div包装成两列并将它们叠加在一起。

Demo

<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类。