Javascript 与Bootstrap 3一起使用时的形式输入超调模式

我试图用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 -->

登录
登录
取消
忘记密码
{{error.message}}

这是因为它们在一个模态中，在一个容器中。尝试从模式中删除.container类

---

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

尝试给你的输入一些改变宽度的类，比如“col-md-12”hi-Vlado-尝试过了-仍然没有运气