用于修复宽度和高度的 CSS 代码 - 引导程序

Question

我在我的网络应用程序上使用轮播。目前我有两个图表，当用户单击下一个箭头时，第二个图表显示为demo here. 第二个图形的宽度和高度减小了。我无法弄清楚如何修复宽度和高度，以便在单击下一个箭头时不会减小。 我已经浏览了这个链接Bootstrap carousel resizing image，但它对我不起作用。请告知如何在轮播时固定宽度和高度，（当使用轮播时，第二张图的尺寸会减小，如上面的演示所示。

js代码：

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

      <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>

      </ol>
      <div class="carousel-inner">
     <div id='id1' class="item active">
      <table style="width:100%;height:80%;">
      <tr>
     <td id="id1td"  ng-controller="myController1">
      <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
   </td>
    </tr>
    </table>

    </div>

    <div id='id2' class="item" ng-controller="myController2">
    <table style="width:100%;height:90%;">
      <tr style="height:5%;">
       <td>
         <h1>Title and some content goes here----</h1>
         </td>
    <tr style="height:85%;">

    <td id="id2td">
    <div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
    </td>
    </tr>
    </table>

    </div>

    </div> 

      <!-- Left and right controls -->
       <span class="left carousel-control" href="#myCarousel" data-slide="prev" >
                                         <span class="glyphicon glyphicon-chevron-left"></span>
                                     </span>
                                     <span class="right carousel-control" href="#myCarousel" data-slide="next">
                                         <span class="glyphicon glyphicon-chevron-right"></span>
        </span>
</div>

Answer 1

您可以尝试在选项中设置图表区域的宽度和高度：

chartArea: {
            'height': '200',
            'width': '200'
        }