Question

我正在开发角度和引导应用程序。我正在我的应用程序中实现bootstrap的旋转木马。面对宽度和高度调整问题。

演示链接：https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview 当用户点击上面链接中的下一个箭头时，我们可以看到图形，但图形的尺寸减小了。 我希望所有图片/图片都是100％宽度和高度。任何建议都会有所帮助。

css代码：

.panel-info .panel-heading  {
        background-color: #c1c6dd;
    }

    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }

    .carousel-indicators {
        right: 50%;
        top: auto;
        bottom: -10px;
        margin-right: -19px;
    }

    .carousel-indicators li {
        background: #cecece;
    }

    .carousel-indicators .active {
        background: #428bca;
    }

    .carousel-control.left, .carousel-control.right {
        color: #2fa4e7;
        background-image: none;
    }

    .carousel-control {
        z-index: 10;
        top: 2%;
        width: 30px; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    .carousel-control.left { left: -10px; }
    .carousel-control.right { right: -10px; }


    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
        font-size: 70px;
        margin-left : -17px;
        margin-right : 24px
    }

html代码：

  <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

标签和轮播始终存在问题。渲染图表时。如果制表符或轮播未激活，则无法正确呈现图表。所以我找到了解决方案。

只在index.html文件中找到新代码中的所有delete-me类，并在加载页面后删除它们

<script type="text/javascript" charset="utf-8">
   setTimeout(function() {
     $('.delete-me').removeClass('active delete-me');
   }, 500);
</script>

我刚刚更新了你的代码 DEMO：https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview

无法将图像的宽度和高度固定为100％

1 个答案: