引导3.0应用程序不能滚动 [英] Bootstrap 3.0 app not scrolling
问题描述
我有一个非常基本的引导/ AngularJS应用程序。这个应用程序简单地显示数据我从服务器返回的行。虽然所有的数据出现，我不能，如果数据超出页面向下滚动页面。我想不通为什么会这样。我的HTML看起来像这样：
I have a really basic Bootstrap / AngularJS app. This app simply displays rows of data I get back from the server. While all of the data appears, I can't scroll down the page if the data goes beyond the page. I can't figure out why this is happening. My HTML looks like this:
<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>
为什么不会在页面滚动？
Why won't this page scroll?
推荐答案
的问题是，你有一个固定的资产净值在顶部，但不具备集装箱和行
The issue is that you have a fixed nav at the top but do not have the container and row
的容器和行类是网格的要求。
布局会像下面的
The container and row classes are a requirement for the grid.
the layout would be like the below
<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 ＆LT; DIV CLASS =COL-LG-12＆GT;
这篇关于引导3.0应用程序不能滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
