在浏览器中被 Bootstrap 覆盖的自定义 css答案

【问题标题】：Custom css overridden by Bootstrap in browser在浏览器中被 Bootstrap 覆盖的自定义 css
【发布时间】：2016-12-02 00:47:22
【问题描述】：

我的样式表目录是这样设置的

stylesheets
    bootstrap.min.css
    style.css

在我的 style.css 中，我想像这样编辑 pre 标签：

pre {
    background-color: #d9edf7;
    border: #d9edf7;
    color: navy;
}

但是，这并没有在浏览器中被拾取。看起来浏览器正在使用 bootstrap.min.css 中的样式。当我将鼠标悬停在 pre 标记块上时，这就是 Chrome 的检查器工具中的样子：

那么如何让它使用我的自定义 css 呢？

【问题讨论】：

确保在引导 css 之后包含自定义 css！
@sebastianbrosch 啊，我明白了，现在可以了
@sebastianbrosch 谢谢！！

标签： html css twitter-bootstrap google-chrome stylesheet

【解决方案1】：

您必须确保在 Bootstrap CSS 之后包含您的自定义 CSS，如下所示：

<head>
    <!-- don't include your custom CSS here! -->
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <style>
        pre {
            background-color: #d9edf7;
            border: #d9edf7;
            color: navy;
        }
    </style>
</head>

【讨论】：

【解决方案2】：

放置style.css 之后 bootstrap.min.css，所以style覆盖bootstrap。

【讨论】：