在Bootstrap Grid中无法获得两列

Question

我有一个asp.net Web表单，我正在使用Bootstrap。 在容器div中，我有10个由谷歌图表api制作的饼图。 我希望将这些图表分为两列，每列五个。

可以在普通的HTML tabel中执行此操作，我在此处设置宽度和高度。

<table>
    <tr>
        <td>
            <div id="Q7piechart" style="width: 450px; height: 300px;"/>
        </td>

        <td>
            <div id="Q8piechart" style="width: 450px; height: 300px;"/>
        </td>
    </tr>
</table>

但我想使用Bootstrap网格，因此它可以响应。

我试试这个：

<div class="row">
      <div class="col-lg-6">
          <div id="Q9piechart" style="width: 450px; height: 300px;"/>
      </div> 
      <div class="col-lg-6">
          <div id="Q10piechart" style="width: 450px; height: 300px;"/>
      </div> 
</div>

这个

<div class="row">
      <div class="col-lg-6">
          <div id="Q9piechart" style="width: 70%"/>
      </div> 
      <div class="col-lg-6">
          <div id="Q10piechart" style="width: 70%"/>
      </div> 
</div>

我也尝试了用于列的“span6”类。 当我浏览页面时，容器div大约是1170px。 但网格中的图表始终位于同一列中。 我做错了什么？

修改

这就是Javascript的样子（制作我的图表的代码）;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Svært enig', 'Antall'],
      ['Enig',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('Q9piechart'));
    chart.draw(data, options);
  }
</script>

Answer 1

编辑：
<div class="row"> <div class="col-sm-6"> <div id="Q9piechart" ></div> </div> <div class="col-sm-6"> <div id="Q10piechart" ></div> </div> </div>

在选项

中指定图表的宽度

编辑：var options = { title: 'My Daily Activities', chartArea:{left:0,top:0,width:"100%",height:"50%"}, width: 320 };