Bootstrap - 在较大的列周围包裹列

Question

我知道如何在Bootstrap中执行标准列等操作。但是，我还有一些我还没有遇到过的东西，谷歌似乎无法回答这个问题。也许我不知道该怎么称呼，因此我无法找到它。

我基本上有一堆盒子，右边有一个大盒子，下面还有更多的小盒子。我觉得我很困惑因为通常我会有一行，有4列3宽，但是较大的列需要占用多行..

这是我在绘画中做的一个简单例子：

较小的盒子有点像投资组合的缩略图，它们都是相同的尺寸。较大的框是一个Twitter新闻源，这是Twitter提供的在您的网站上放置新闻源。

我不确定是否应创建两个部分（上半部分和下半部分）或如何处理此部分。我考虑过制作顶部2列，然后在第1列中将它分成两部分（6和6）。然后像往常一样在它下面单独做一部分。

但是，您可以轻松地将图像添加到段落中，并使文本环绕图像。我想要同样的事情，只有Twitter新闻源和专栏..

如果我仍然卡住了，我可以在我接受方法后添加代码。

我试图在第一列中添加另一组行和列，但它打破了列之间的间距，这意味着添加CSS来修复间距。

希望有人做过这样的事情，或者可以通过我的形象看到如何处理这个问题。

Answer 1

你能展示你的HTML / CSS，看看代码破坏的地点和原因吗？当你接近是正确的，我会做同样的事情。见下文

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
</div>
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
</div>

Answer 2

尝试这样的事情：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            row1-col1
            <div class="row">
                <div class="col-sm-6">
                    Sub-row1-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row1-Sub-col2
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    Sub-row2-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row2-Sub-col2
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    Sub-row3-Sub-col1
                </div>
                <div class="col-sm-6">
                    Sub-row3-Sub-col2
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            row1-col2
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            row2-col1
        </div>
        <div class="col-sm-3">
            row2-col2
        </div>
        <div class="col-sm-3">
            row2-col3
        </div>
        <div class="col-sm-3">
            row2-col4
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            row3-col1
        </div>
        <div class="col-sm-3">
            row3-col2
        </div>
        <div class="col-sm-3">
            row3-col3
        </div>
        <div class="col-sm-3">
            row3-col4
        </div>
    </div>
</div>

Answer 3

您只需要在现有列中添加更多行。

例如：

    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-3">1</div>
                    <div class="col-lg-3">2</div>
                </div>
                <div class="row">
                    <div class="col-lg-3">3</div>
                    <div class="col-lg-3">4</div>
                </div>
                <div class="row">
                    <div class="col-lg-3">5</div>
                    <div class="col-lg-3">6</div>
                </div>

            </div>
            <div class="col-lg-6">Big content</div>
        </div>
    </div>