如何使用twitter bootstrap网格框架创建两个独立的列

Question

我想创建一个（或多或少Pinterest）网格布局，如下所示。两列具有不同的行，但是并排显示。如何使用twitter bootstrap网格框架执行此操作？

如果我没弄错，正常的行/ col行为会给我下面的布局。

Answer 1

您应该能够通过使用两列本身具有行来实现布局：

<div class="row">
    <div class="col-xs-6">
        <div class="col-xs-12">1</div>
        <div class="col-xs-12">2</div>
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-6">3</div>
                <div class="col-xs-6">4</div>
            </div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="col-xs-12">5</div>
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-6">6</div>
                <div class="col-xs-6">7</div>
            </div>
        </div>
        <div class="col-xs-12">8</div>
    </div>
</div>

http://jsfiddle.net/zz4ug/

Answer 2

通过背景颜色或图像创建不协调行的错觉：

<div class="container">
    <div class="row">
        <div class="col-xs-6 red">&nbsp;</div>
        <div class="col-xs-6 orange">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col-xs-6 red">&nbsp;</div> <--This will appear to be on row 1
        <div class="col-xs-3 blue">&nbsp;</div>
        <div class="col-xs-3 green">&nbsp;</div>
    </div>
</div>

查看 jsFiddle