bootstrap Modal 中的内容没有填充答案

【问题标题】：Content inside bootstrap Modal does not get paddingbootstrap Modal 中的内容没有填充
【发布时间】：2025-12-25 12:05:17
【问题描述】：

我在项目中打开了一个模态框，但未显示一些 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，它没有覆盖默认值。

谢谢

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

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

要么增加优先级：

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

或者添加 !important 到规则中：

.resetPasswordPadding { padding:5px !important }

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

【讨论】：