具有可变行/列大小的Jquery Mobile Responsive Grid

Question

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

图表总是400px乘400px。表总是400px宽，可能大于400px高。

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

以下是一些展示的线框图：

风景：

人像：

有人可以推荐使用现有框架或插件的方法吗？当窗口调整大小或方向改变时，我开始编写自己的Javascript来重新排列图表，但它很快就变得非常复杂。我知道那里已经有了一些东西。

jQuery Mobile中的响应式网格框架能实现这一目标吗？

Answer 1

是的，你应该看看bootstrap网格或骨架或其中之一。基本上在bootstrap中它会像

<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> 

（等等......其他图表）