Question

我正在尝试添加整页背景颜色。 Bootstrap不会应用我指定给元素的样式。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- bootstrap requirements and custom css + jquery -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700" rel="stylesheet">
</head>
<body>
    <div class="container-fluid bg">

    </div>
</body>
</html>

和我的CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* font declaration */
body {
    font-family: Montserrat;
}

.bg {
    /* The image used */
    background-image: url("img/home-bg.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

html，body和body标签工作正常。当我检查chrome上的元素时，我可以看到它们正常运行。但是.bg类没有。当我将它用作内部和内联样式表时，这些属性起作用，但是当我将它用作外部时，它并不适用。我在这里阅读的所有内容都不起作用。

我试过

div.bg {
     /* elements */
}

html > body > .bg {
     /* elements */
}

我尝试添加容器流体

.container-fluid.bg {
     /* elements */
}

body > div > .container-fluid > .bg {
     /* elements */
}

他们都不能工作

使用引导程序在外部样式表中没有样式化的元素

0 个答案: