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

我想创建一个（或多或少类似Pinterest）网格布局，如下图所示。这两列有不同的行，但确实并排显示。如何使用twitter引导网格框架实现这一点

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

---

通过背景色或图像创建不一致行的错觉：

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

通过背景色或图像创建不一致行的错觉：

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


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

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


1.
2.
3.
4.
5.
6.
7.
8.

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

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


1.
2.
3.
4.
5.
6.
7.
8.

解释为什么常规.row+.col-？？不要解决你的问题。如果是瓷砖，你想用砖石或同位素。我改变了问题，加入了正常的行/列不工作的原因，在这里似乎是一个完美的选择。试试看。或者你也可以试着解释为什么是正则的.row+.col-？？不要解决你的问题。如果是瓷砖，你想用砖石或同位素。我改变了问题，加入了正常的行/列不工作的原因，在这里似乎是一个完美的选择。试试看。或者，你也可能想尝试在我的情况下不起作用，因为列1被有效地分割成两行，这将破坏其中的内容。这是因为内容扭曲了行高还是因为你被限制在单独的行上插入内容？这在我的情况下不起作用，因为列1被有效地分割成两行这将破坏其中的内容。这是因为内容扭曲了行的高度，还是因为您被限制在单个行上插入内容？因此，我应该自己创建两列，并为每个列分配行。我想诀窍是让这两个专栏挨着住，并且仍然让他们做出反应。这里最好的方法是什么，只使用流吗？@koenpeters:你说的负责任到底是什么意思？他们已经负责了，因为我使用的是引导网格，我的意思是响应性设计中的响应性。@koenpeters:嗯，负责是我的错别字。我还是不明白。bootstrap使用的网格已经响应（只需为其他显示大小添加
col-*-*
类，就可以了）我很抱歉。我刚才意识到您使用的是嵌套行。你的答案是正确的。所以我应该自己创建两列，并为每个列分配行。我想诀窍是让这两个专栏挨着住，并且仍然让他们做出反应。这里最好的方法是什么，只使用流吗？@koenpeters:你说的负责任到底是什么意思？他们已经负责了，因为我使用的是引导网格，我的意思是响应性设计中的响应性。@koenpeters:嗯，负责是我的错别字。我还是不明白。bootstrap使用的网格已经响应（只需为其他显示大小添加
col-*-*
类，就可以了）我很抱歉。我刚才意识到您使用的是嵌套行。你的回答是正确的。