具有可变行/列大小的 Jquery Mobile 响应式网格

Question

我正在尝试在我的 jQuery Mobile 应用程序中创建仪表板。仪表板页面将在左上角包含一张地图。地图周围会有各种图表和表格。

图表总是 400 x 400 像素。表格将始终为 400 像素宽，并且可能大于 400 像素高。

我不是 CSS 专家，但我希望创建一个响应式布局，以便地图始终占据页面宽度的至少一半。如果 2 个图表/表格可以并排放置在页面的一半中，那么它们将是并且地图宽度应填满页面的其余宽度。同样，如果 2 个图表可以垂直放置在页面的整个高度内，那么嘿，地图将成为垂直堆叠的 2 个图表的高度（包括它们之间的间隙）。然后任何其他图表将并排添加到地图下方，直到页面宽度填满。然后将添加新的图表行。

这里有一些线框图来演示：

风景：

纵向：

谁能推荐一种使用现有框架或插件的方法？我开始编写自己的 Javascript 来在调整窗口大小或更改方向时重新排列图表，但它很快就变得非常复杂。我知道肯定已经有什么东西了。

jQuery Mobile 中的响应式网格框架能做到这一点吗？

Answer 1

是的，您应该研究引导网格或骨架或其中之一。基本上在引导程序中它会像

<div id="map" class="col-md-6 col-sm-8"></div>
<div id="chart1" class="col-md-3 col-sm-4"></div>
<div id="chart2" class="col-md-3 col-sm-4"></div>
<div id="chart3" class="col-md-3 col-sm-4"></div> 

（等等......对于其余的图表）