我正在使用Python Flask开发Web应用程序,并且正在使用CDN Bootstrap进行常规样式设计但是,我正在测试以自定义Bootstrap的某些组件,并试图为.container类提供背景色。无论如何,还是容器类不允许覆盖样式?
HTML DOC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/main.css">
<title>Document</title>
</head>
<body>
<div class="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil assumenda laudantium rerum nam delectus at, accusamus natus iure reprehenderit unde, accusantium adipisci neque quaerat velit excepturi. Quo eaque veniam suscipit.
</div>
</body>
</html>
CSS file
.container{
background-color: black;
}
您可以在另一个div标签中包装容器,或在单独的链接样式表中使用一些CSS,并确保CSS文件位于页面代码中bootstrap.css文件的链接之后。
CSS file
.container{
background-color: black !important;
}
.color--black {
background-color: black;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/main.css">
<title>Document</title>
</head>
<body>
<div class="color--black">
<div class="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil assumenda laudantium rerum nam delectus at, accusamus natus iure reprehenderit unde, accusantium adipisci neque quaerat velit excepturi. Quo eaque veniam suscipit.
</div>
</div>
</body>
</html>