无法覆盖引导 css

Posted 2023-03-06

【中文标题】无法覆盖引导 css

【英文标题】：Unable to override bootstrap css

【发布时间】：2015-03-15 08:18:07

【问题描述】：

我正在尝试覆盖在“modal-footer”的引导类中找到的以下内容

margin-top: 15px;

我有以下 html 代码可以做到这一点：

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

以及以下自定义 css：

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

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

【问题讨论】：

当您在浏览器中检查时，设置margin-top 的实际 选择器是什么？它可能在某些方面比您的自定义 css 更具体。

在添加引导程序后，您是否正在调用您的覆盖样式？你的样式表是在 Bootstrap 调用之后调用的吗？

How to overwrite styling in Twitter Bootstrap 的可能重复项

@Jeroen 加载的实际选择器来自 bootstrap.min.css

呵呵，我明白了。但是选择器是什么？是不是类似于body .modal .modal-footer？这将比您的.my-modal-footer-override 更具体。

【参考方案1】：

您可以尝试更具体的选择器。这可以解决问题

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

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

如果还是不行，你可以把.modal放在这个选择器之前，所以：.modal .modal-footer.my-modal-footer-override。

important! 声明可能被用作肮脏的黑客，但我建议不要这样做。

【讨论】：

我会称之为“不得已而为之的行动”，而不是肮脏的 hack :D 但我也建议不要这样做。

我尝试了更具体的.modal.modal-dialog.modal-content.modal-body.modal-footer.trackers-modal-footer-override margin-top: 0px ！重要

没有空格？如果是，那是正常的，它不起作用.modal .modal-dialog .modal-content .modal-footer.my-modal‌​-footer-override

【参考方案2】：

检查您的 CSS 导入顺序。确保在 Bootstrap 之后加载您的自定义 css。使用 firebug 或 chrome 开发工具查看您的样式是否由于稍后在 html 中导入的内容而被覆盖。

【参考方案3】：

你试过了吗？

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

在“;”之前使用 !important将赋予此规则比引导 css 更大的权重。

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