Twitter Bootstrap：在移動設備上強制元素低於彼此

Question

我有一個使用Twitter Bootstrap和兩列的響應式佈局。

• 格#charts顯示了一些圖表
• DIV #grid顯示文本表格

問題：在較小的設備（例如的iPad，iPhone）表變得非常小，很長（因以換行）。

問題：我可以強制grid-div顯示在小型設備上的chart-div下面嗎？

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8" id="charts"> 
      some charting 
     </div> 
     <div class="span4" id="grid"> 
      table with pager 
     </div> 
    </div> 
</div> 

Answer 1

這是媒體查詢的用途。確定您的斷點並應用適當的樣式：

/* change the max-width to the width when your table becomes unreadible i.e. 1024px or 768px */ 
@media screen and (max-width: 1024px){ 
    #charts, #grid{ 
     width:100%; 
    } 
} 

這是Bootstrap在bootstrap-responsive.css中如何實現它的。

Answer 2

我會設置你的圖表DIV一個min-width：

#charts { min-width: 400px /*replace this with a value that works for you*/; } 

這將防止它倒塌的地步表變得不可讀。