引导3.0应用程序不滚动
引导3.0应用程序不滚动
提问于 2014-06-25 13:05:09
我有一个非常基本的引导/ 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
Stack Overflow用户
回答已采纳
发布于 2014-06-25 15:20:27
问题是在顶部有一个固定的导航，但是没有容器和行。
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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24409510
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号