我有一个非常基本的 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>
为什么这个页面不滚动？
最佳答案
问题是您在顶部有一个固定的导航，但没有容器和行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
<div class="col-lg-12">
关于angularjs - Bootstrap 3.0 应用程序不滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24409510/