[英]Form inputs overshoot modal when using with 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 -->
这是因为您将它们放在模式中-.container中 。 尝试从模式中删除.container类。
.container具有静态宽度而不是百分比。 这就是为什么它溢出的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.