Question

我对Bootstraps很新，试图使用他们的grid system。但是我现在无法改变身体背景颜色。我的样式表正在工作，因为我可以更改容器类的背景颜色。我假设Bootstraps的一些东西覆盖了我的身体背景颜色和字体。

感谢。

HTML

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="clearfix">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
    </body>
</html>

CSS

body{
    font-family: Arial;
    background-color: #455A64;
}

Answer 1

您应该在 Bootstrap之后包含样式表，如下所示：

<link rel="stylesheet" href="styles/bootstrap.min.css"> <link rel="stylesheet" href="styles/style.css">

因为bootstrap包含在代码的最后，所以它的CSS覆盖了style.css中定义的样式。您通常应在所有使用的框架/库之后包含样式表，以便在必要时正确覆盖样式。

Answer 2

这不是好习惯，但你也可以做到

<body style="font-family:Arial; background-color:#455A64">
--------
</body>

你也可以在身体中使用scoped style tags，但保持CSS分离是一个很好的做法，因为它允许轻松编辑以及为多个元素使用相同的CSS。希望这有帮助！

使用Bootstraps网格时更改正文的背景颜色

2 个答案: