如何让Google Charts双饼图横向排列？基于SB Admin 2模板

嘿，这问题其实很好搞定——你现在的代码里把两个图表分别放在了独立的<div class="container">和<div class="row">里，自然会上下堆叠。既然你用的是基于Bootstrap的SB Admin 2模板，直接利用Bootstrap的栅格系统就能让它们横向并排，不需要复杂的CSS或者tabs~

具体调整步骤： #

• 把两个图表的容器放到同一个container和row里
• 给每个图表的列容器分配合适的宽度（Bootstrap栅格是12列，比如各占一半就用col-lg-6）
• 把图表div的宽度从固定的700px改成100%，让它自适应列的宽度，避免超出容器

修改后的代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <!-- 第一个饼图：占6列 -->
    <div class="col-lg-6">
      <div id="top5os" style="width: 100%; height: 300px; background:red;"></div>
    </div>
    <!-- 第二个饼图：占6列 -->
    <div class="col-lg-6">
      <div id="top5country" style="width: 100%; height: 300px; background:blue;"></div>
    </div>
  </div>
</div>

补充说明： #

• 如果想要在中等屏幕（比如平板）上也保持并排，可以加上col-md-6，变成<div class="col-lg-6 col-md-6">，小屏幕下Bootstrap会自动让它们堆叠，保证移动端的可读性
• 不需要额外写CSS，SB Admin 2已经集成了Bootstrap的栅格样式，直接用就行

这样调整后，两个饼图就会横向并排显示啦！

内容的提问来源于stack exchange，提问作者Alex