Блог

Главная - Вопросы по программированию - Приложение Bootstrap 3.0 не прокручивается

Приложение 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">
      <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. ПРИМЕЧАНИЕ: вам не хватает тегов <div class=»container»> и <div class=»row»>, которые содержат тег <div class=»col-lg-12″>.

Ответ №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">

Метки: