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>