Question

我有一个我在项目中打开的模态，没有显示一些CSS修改这是我的代码：

<div class="modal-body">
    <form class="form-horizontal ">
       <div class="form-group ">
            <label class="control-label resetPasswordPadding">Reset Password</label>
            <label class="control-label resetPasswordPadding">Enter your login name, and we will email you a link to reset your password</label>
       </div>
       <div class="form-group">
            <input type="password" class="form-control input-xs" id="loginName" required ng-model="inputPassword" >
            <button ng-disabled="loginForm.$invalid" ng-click="cancel()" type="button" class="btn btn-primary">Cancel</button>

            <button ng-disabled="loginForm.$invalid" ng-click="sendResetLink()" type="button" class="btn btn-primary">Send Link Reset</button>
       </div>
    </form>
</div>

我使用的CSS是：

.resetPasswordPadding {
padding: 5px;
margin: 5px;
}

它对内容没有影响，如果我把css放在：

.resetPasswordRemoveBold {
font-weight: normal;

}
并将重置密码标签更改为：

<label class="control-label resetPasswordRemoveBold">Reset Password</label>

它会设置普通文本，为什么不设置填充/边距？

我的目标是在模态中创建一个忘记我的密码表单，但我必须控制边距/填充等，当我使用chrome调试器时，我可以看到我的margin / padding是0，它没有覆盖默认值。

由于

Answer 1

假设您确信CSS文件实际上正在加载，无论规则是什么，填充为0可能优先于.resetPasswordPadding类。

要么增加优先权：

form div.form-group label.resetPasswordPadding { padding:5px }

或者对规则添加！important：

.resetPasswordPadding { padding:5px !important }

通常最佳做法是提高优先级，而不是过度使用!important

内部引导程序Modal内容没有填充

1 个答案: