css - 推特 Bootstrap : force elements to be below each other on mobile devices

Question

我有一个使用 Twitter Bootstrap 的两列响应式布局。

• div #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 中就是这样做的。