在Bootstrap Grid中無法獲得兩列

Question

我有一個使用Bootstrap的asp.net Web窗體。 在容器div裏面，我有10個由google圖表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 };