如何使用bootstrap div設計rowspan？

Question

如何使用bootstrap設計網格系統？

在大中型顯示器中會顯示2列和3行。第一列將有1個單元格，第二列將有3個單元格。

在小型和超小型顯示器中，它只顯示1列和4行。每個單元格將一個接一個堆疊在一個列中。來自大型或中型展示的第一列/單元格應該在這裏首先出現。

Answer 1

試試這個：

DEMO

 <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        First Column, First Cell 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, First Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Second Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Third Cell 
       </div> 
      </div> 
     </div> 

Answer 2

你可以窩在 「行」

<div class = "row"> 
    <!-- first column--> 
    <div class = "col-lg-12"> 
    ...your code here 
    </div> 

    <!-- second column--> 
    <div class = "col-lg-12"> 
     <div class = "row"> 
      <div class = "col-lg-6"> 
      .. your code cell 1 
      </div> 

      <div class = "col-lg-6"> 
      .. your code cell 2 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

Jake745答案是正確的莫名其妙，但錯過了 「行」 的div的嵌套列。你不能有沒有行的列，所以維護這個結構是很好的。此外，如果您要求將所有屏幕尺寸分散到12或任何大小，則無需重複該列。也就是說，如果您需要移動設備佔用12列，而平板電腦則需要佔用6列，您只需要輸入「col-xs-12 col-sm-6」，而sm以上的任何內容總是會自動佔用6列。

這樣，你會減少你的代碼，而不是放在不必要的代碼。希望這個幫助。

<div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
       First Column, First Cell 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
      <div class="row"> 
       <div class="col-xs-12"> 
       Second Column, First Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Second Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Third Cell 
       </div> 
      </div> 
     </div> 
    </div>