Question

我有一个非常基本的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>

为什么这个页面不会滚动？

Answer 1

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

container和row类是网格的要求。布局如下所示

<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 class="col-lg-12">

中不必要的div

Bootstrap 3.0应用程序不滚动

1 个答案: