如何在Bootstrap 4 HTML中覆盖容器类

问题描述 投票:0回答:1

我正在使用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;
}
html css
1个回答
0
投票

您可以在另一个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>
© www.soinside.com 2019 - 2024. All rights reserved.