html - bootstrap Modal 中的内容没有填充

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 调试器时，我可以看到我的边距/填充为 0，它没有覆盖默认值。

谢谢

Answer 1

假设您确信 CSS 文件确实正在加载，无论什么规则将填充设置为 0，都可能比您的 .resetPasswordPadding 类具有更高的优先级。

要么增加优先级:

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

或者在规则中添加 !important:

.resetPasswordPadding { padding:5px !important }

通常最好的做法是增加优先级而不是过度使用 !important