javascript - 与 Bootstrap 3 一起使用时，表单输入过度模态

Question

我正在尝试使用 Angular 加载模态，然后用模板填充它。

问题是输入超出了模态 - 这是问题的屏幕截图:

这是模态实例化的代码:

$scope.logInOpen = function () {
    console.log($modal);
    var modalInstance = $modal.open({
      templateUrl: '../views/login.html',
      controller: 'AuthController',
      size: 'sm'
    });

 modalInstance.result.then(function () {
        console.log($scope.modalInstance);
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
      $scope.modalInstance = null;
    });
  }

这是/view/login.html

<div class="container">
  <div class="row">
  <div class="col-md-6 col-lg-2">
  <form ng-submit="logIn()" style="margin-top:30px;">
        <h3>Log In</h3>

        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Email"
          ng-model="user.username"></input>
        </div>
        <div class="form-group">
          <input type="password"
          class="form-control"
          placeholder="Password"
          ng-model="user.password"></input>
        </div>
        <button type="submit" class="btn btn-success">Log In</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>

        <span ><small> Forgot Password</small></span>
      </form>
      <div class="row">
      <div ng-show="error" class="alert alert-danger">
        <span>{{ error.message }}</span>
      </div>
      </div>
     </br><br>
  </div><!-- closes .col-md-6 -->
  </div><!-- closes .row -->

</div><!-- closes .container -->

Answer 1

这是因为您将它们放在模态中 - 在 .container 中。尝试从模式中删除 .container 类。

.container 具有静态宽度而不是百分比。这就是它溢出的原因。