html - 覆盖 Bootstrap 样式

标签 html css twitter-bootstrap twitter-bootstrap-3

我有一个 bootstrap.min.css 和下面的 div。

<div class='jumbotron'> 
</div>

我正在使用自定义 css 文件覆盖此类。

.jumbotron{
    background: green url(../img/city.jpg) no-repeat top left;
}

但是 jumbotron 类的内容没有改变。我知道 css 已正确包含,因为它适用于与 bootstrap 没有共享名称的其他 div。 我该如何解决这个问题?

最佳答案

在 Chrome 的开发者工具中查看元素(或者 Firefox 有类似的东西,不知道他们叫什么)。

右键单击 > 检查元素

现在看看右边的 CSS 样式。您在列表中的某处看到您的自定义样式了吗?您可能需要向下滚动一点。

如果它不在列表中,则意味着您的 CSS 文件未正确包含或元素名称拼写错误,因此您的样式未被应用。

如果它在列表中但被划掉了,这意味着 Bootstrap 的一种样式可能正在覆盖它。您可以使用 more specific selector 使您的样式优先于 bootstrap 的样式

关于html - 覆盖 Bootstrap 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23410185/

相关文章:

javascript - Js倒计时文本不在边框中心内

javascript - 使用 Javascript 使用计时器更改背景颜色和文本颜色

javascript - 寻找 sibling 的值(value)

javascript - TailwindCSS 对齐内容在 CSS 网格中不起作用

jquery - 使用 jQuery 在复选框列表中加注星标

css - 将 .CSS 样式元素添加到 JQuery Mobile 中的链接按钮

javascript - 基于双单选按钮选择显示/隐藏输入字段

html - 尝试使用 bootstrap 4 重新创建导航栏

javascript - 如何在 Bootstrap 轮播中不同高度的元素之间平滑过渡

html - flex 容器 css 的行线