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

Question

我知道如何在 Bootstrap 中制作标准列等。但是，我有一些我还没有遇到过的东西，我似乎无法用谷歌搜索答案。也许我不知道怎么调用它，所以我找不到它。

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

这是我用 paint 制作的一个简单示例:

较小的框有点像作品集的缩略图，它们的大小都相同。较大的框是 Twitter 新闻提要，这是 Twitter 提供的用于在您的网站上放置新闻提要的 div。

我不确定是否应该创建两个部分(上半部分和下半部分)或如何处理这个问题。我考虑过将顶部部分设为 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>