부트 스트랩 격자에 두 개의 열을 가져올 수 없습니다.

Question

부트 스트랩을 사용하는 asp.net 웹 양식이 있습니다. 컨테이너 div 안에는 Google 차트 api에서 만든 piechart가 10 개 있습니다. 나는이 두 차트를 각각 5 개씩 두 개의 컬럼으로 만들고 싶습니다.

너비와 높이를 이렇게 설정 한 일반 HTML 탭에서는이 작업을 수행하는 것이 좋습니다.

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

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

하지만 부트 스트랩 표를 사용하여 반응 형이 될 수 있습니다.

<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는 약 1170 픽셀입니다. 그러나 표의 차트는 항상 같은 열에 있습니다. 내가 뭘 잘못하고있어?

편집

자바 스크립트가 (내 차트를 만드는 코드)처럼 보이는 방법이있다;

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