AngularJS/Bootstrap 应用程序中不必要的水平滚动条

Question

我正在尝试使用 bootstrap 和 angularjs 创建一个应用程序作为练习，我的应用程序的简化版本在这支笔中进行了说明：http://codepen.io/megadeen/pen/ZWrGmv

这是主要代码：

<table class="main" ng-app="app" ng-controller="main">
  <tr>
    <td class="sidebar">
      <!-- Set page using AngularJS -->
      <a ng-click="page = 'fpage'">First Page</a>
      <br>
      <a ng-click="page = 'spage'">Second Page</a>
    </td>
    <td class="content">
      <!-- First Page -->
      <div class="fpage" ng-show="page == 'fpage'">
        <div class="col-md-5">
          .... Content ....
        </div>
      </div>
      </div>
      <!-- Second Page -->
      <div class="spage" ng-show="page == 'spage'">
        <div class="row">
          <div class="col-md-7">
            .... Content ....
          </div>
        </div>
    </td>
  </tr>
</table>

但是，总是有这个杂散的水平滚动条不会消失。这个流浪滚动条只出现在第二页和后续页面中。

我尝试将行 class 添加到 fpage 和 spage div。但是，如果我这样做，则滚动条会出现在所有页面中。

为什么会发生这种情况，我该如何解决这个问题？

Answer 1

您应该使用 col-md-12 而不是 row。