Bootstrap - 围绕较大的列包装列

Question

我知道如何在Bootstrap中执行标准列等。然而，我还有一些我还没有遇到的事情，我似乎无法谷歌答案。也许我不知道该怎么称呼它，因此我找不到它。

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

下面是一个简单的例子，我在做漆：

较小的盒子就像一个投资组合的缩略图，他们都是相同的大小。较大的框是一个Twitter新闻提要，这是Twitter提供的一个功能，可以在您的网站上发布新闻推送。

我不确定是否应该创建两个部分（上半部分和下半部分）或如何处理此问题。我考虑制作顶部2栏，然后在第1栏中将它分成两部分（6和6）。然后在正常情况下在它下面单独一节。

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

我可以添加代码，一旦我得到的方法，如果我仍然卡住。

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

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

Answer 1

尝试这样：

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

您刚才对annidate现有列内更多的行。

如：

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

Answer 3

你能告诉你的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>