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 。