css - Twitter Bootstrap：强制元素在移动设备上彼此下方

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 中的做法。

Answer 2

我会min-width在你的图表 div 上设置一个：

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

这将防止它崩溃到表格变得不可读的程度。