Как переопределить класс контейнера в Bootstrap 4 HTML - PullRequest
Новая
       0

Как переопределить класс контейнера в Bootstrap 4 HTML

0 голосов
/ 21 марта 2020

Я работаю над веб-приложением с Python Flask и использую CDN Bootstrap для общего стиля. Однако я тестирую вещи для настройки некоторых компонентов Bootstrap и пытаюсь придать цвет фона к классу .container. Есть ли способ сделать это или контейнерный класс не разрешает переопределение стиля?

HTML DO C

<!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;
}

1 Ответ

0 голосов
/ 21 марта 2020

Вы можете заключить контейнер в еще один тег 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...