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>

然而，这个迷路的水平滚动条总是不会消失。此迷路滚动条仅出现在第二页和后续页面中。

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

为什么会发生这种情况？如何解决此问题？

Answer 1

您应该使用col-md-12代替row。