Angularjs Bootstrap 3.0应用程序未滚动_Angularjs_Twitter Bootstrap 3

Angularjs Bootstrap 3.0应用程序未滚动

angularjs twitter-bootstrap-3

Angularjs Bootstrap 3.0应用程序未滚动,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,我有一个非常基本的Bootstrap/AngularJS应用程序。此应用程序只显示我从服务器返回的数据行。当所有数据出现时，如果数据超出页面范围，我无法向下滚动页面。我不明白为什么会这样。我的HTML如下所示： <body> <header class="header fixed-top clearfix" role="navigation"> <nav class="navbar navbar-default" role="navigation">

我有一个非常基本的Bootstrap/AngularJS应用程序。此应用程序只显示我从服务器返回的数据行。当所有数据出现时，如果数据超出页面范围，我无法向下滚动页面。我不明白为什么会这样。我的HTML如下所示：

<body>
  <header class="header fixed-top clearfix" role="navigation">
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">    
        <div class="navbar-header">
          <a class="navbar-brand" href="/">
            <img src="assets/images/logo.png" class="logo" alt="My App">
          </a>                
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"> 
            <li><a href="/#/overview">Overview</a></li>                        
            <li><a href="/#/report-1">Report 1</a></li>
            <li><a href="/#/report-2">Report 2</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="col-lg-12">
    <div>
      <div>
        <div class="tabbable tabs-below">
      <ul class="nav nav-pills">
            <li ng-class="{active: selectedTab == 1}" class="">
              <a ng-click="selectedTab = 1;">By Month</a>
        </li>
            <li ng-class="{active: selectedTab == 2}">
              <a ng-click="selectedTab = 2;">By Week</a>
        </li>
            <li ng-class="{active: selectedTab == 3}" class="active">
              <a ng-click="selectedTab = 3;" class="">By Day</a>
            </li>
      </ul>

      <div class="tab-content ng-hide" ng-show="selectedTab == 1">
        <h3>Report</h3>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>COL 1</th>
          <th>COL 2</th>                            
          <th>COL 3</th>
          <th>COL 4</th>
          <th>COL 5</th>
          <th>COL 6</th>
        </tr>
              </thead>

          <tbody>
        <tr ng-repeat="record in records" class="ng-scope">
          <td>{{record[0]}}</td>
          <td>{{record[1]}}</td>
          <td>{{record[2]}}</td>
          <td>{{record[3]}}</td>
          <td>{{record[4]}}</td>
          <td>{{record[5]}}</td>
        </tr>
              </tbody>
        </table>                
        <br>
      </div>

          <div class="tab-content ng-hide" ng-show="selectedTab == 2">
        <h3>Report</h3>
          <table class="table table-striped">
        <thead>
          <tr>
            <th>COL 1</th>
            <th>COL 2</th>                          
            <th>COL 3</th>
            <th>COL 4</th>
            <th>COL 5</th>
            <th>COL 6</th>
          </tr>
        </thead>

                <tbody>
          <tr ng-repeat="record in records" class="ng-scope">
            <td>{{record[0]}}</td>
            <td>{{record[1]}}</td>
            <td>{{record[2]}}</td>
            <td>{{record[3]}}</td>
            <td>{{record[4]}}</td>
            <td>{{record[5]}}</td>
          </tr>
        </tbody>
              </table>              
          <br>                  
        </div>

            <div class="tab-content" ng-show="selectedTab == 3">
          <h3>Report</h3>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>COL 1</th>
              <th>COL 2</th>                            
              <th>COL 3</th>
              <th>COL 4</th>
              <th>COL 5</th>
              <th>COL 6</th>
            </tr>
          </thead>

          <tbody>
            <tr ng-repeat="record in records" class="ng-scope">
              <td>{{record[0]}}</td>
              <td>{{record[1]}}</td>
              <td>{{record[2]}}</td>
              <td>{{record[3]}}</td>
              <td>{{record[4]}}</td>
              <td>{{record[5]}}</td>
            </tr>
          </tbody>
        </table>                
        <br>
          </div>
        </div>
      </div>
    </div>
      </div>
</body>









按月


每周


白天


报告
第1列
第2列
第3列
第4列
第5列
第6栏
{{记录[0]}
{{记录[1]}
{{记录[2]}
{{记录[3]}
{{记录[4]}
{{记录[5]}


报告
第1列
第2列
第3列
第4列
第5列
第6栏
{{记录[0]}
{{记录[1]}
{{记录[2]}
{{记录[3]}
{{记录[4]}
{{记录[5]}


报告
第1列
第2列
第3列
第4列
第5列
第6栏
{{记录[0]}
{{记录[1]}
{{记录[2]}
{{记录[3]}
{{记录[4]}
{{记录[5]}

为什么此页面不滚动？

问题是您在顶部有一个固定导航，但没有容器和行

网格需要

容器

和

行

类。布局如下图所示

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>


...
...

同时删除

中不必要的div。您是说页面已被锁定，无法滚动，还是滚动时没有显示新数据？注意：缺少包含该标记的和标记。