引導響應格顯示

Question

我有兩個div

<div class="container"> 
<div class="span6"> 
</div> 
<div class="span6"> 
</div> 
</div> 

當用戶使用手機的div應該是兩行一列，而不是兩列一行。

我該怎麼做？

Answer 1

從Bootstrap docs：

打開您的項目響應CSS通過包括內文檔的正確元標記和額外的樣式表。如果您從「自定義」頁面編譯Bootstrap，則只需包含元標記。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 

此外，使用適當的標記（.spanX應該是裏面.row）：

<div class="container"> 
    <div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    </div> 
</div> 

對於fluid layout你可以使用.container-fluid和.row-fluid。