自定义 CSS 不能与 Bootstrap 一起使用答案

【问题标题】：Custom CSS not working alongside Bootstrap自定义 CSS 不能与 Bootstrap 一起使用
【发布时间】：2021-06-12 07:07:00
【问题描述】：

我尝试在我的 Bootstrap 旁边使用自定义 CSS 文件，但它不起作用。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="index.css">


  <script src="bootstrap.min.js"></script>
  <title>NRRN Concrete Udhyog</title>
</head>

在文档的这一部分，我尝试使用自己的自定义 CSS：

<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="/Images /cover.jpg" id="slide-1-background" class="d-block w-100" alt="slide1">
    <div class="carousel-caption d-none d-md-block">
      <h5>First slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
    </div>
  </div>

我的 CSS 代码：

#slide-1-background {
  background-color: black !important;
}

【问题讨论】：

img 与背景色？你可以尝试一些其他的CSS，看看它是否有效？比如边框等。
只要显示图像，它就会遮盖背景色。因为背景图像逐层放置在背景颜色之上。

标签： html css bootstrap-5

【解决方案1】：

你可以试试这样的。它覆盖了 Bootstrap 的类。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- bootstrap css link -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
        <style>
    
          /* -- Your custom css goes here -- */

          .custom{
          background: #000;
          font:10px 'Helvetica',sans-serif;
          color:white;
          }

        </style>  

  </head>
  
  <body>
    <button type="button" class="btn btn-warning custom">Danger</button>
  </body>

</html>

【讨论】：