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*/; } 

这将防止它倒塌的地步表变得不可读。