无法覆盖bootstrap css

Question

我试图覆盖“modal-footer”

的bootstrap类中的以下内容

margin-top: 15px;

我有以下HTML代码执行此操作：

<div class="modal-footer my-modal-footer-override"></div>

以及以下自定义css：

.my-modal-footer-override {
    margin-top: 0px
}

但这不起作用。 有什么建议吗？

Answer 1

您可以尝试更具体的选择器。这可以做到这一点

.modal-footer.my-modal-footer-override {
   margin-top: 0px;
}

多个类选择器应该比IE6更新。请注意类之间没有空格：这意味着这两个类都应用于相同的元素。

如果仍然没有删除它，您可以将.modal放在此选择器之前，因此：.modal .modal-footer.my-modal-footer-override。

important!声明可以用作肮脏的黑客，但我会反对它。

Answer 2

检查您的CSS导入订单。确保在Bootstrap之后加载自定义css。使用firebug或chrome dev工具来查看您的样式是否被覆盖，因为html中稍后会导入某些内容。

Answer 3

你试过这个吗？

.my-modal-footer-override {
    margin-top: 0px !important;
}

在“;”之前使用！important会给这个规则比bootstrap css更重要。

您可以在脑中使用..css ..或在新的css文档中添加HTML。