为什么 Bootstrap 会覆盖我的本地样式表?

Why does Bootsrap overwrite my local stylesheet?

每当我像这样导入 bootstrap 时

<link rel="stylesheet" href="./css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

它以某种方式覆盖了我自己的 css 文件,即使我没有使用任何 bootstrap 东西。

我的 .css 看起来像这样

html {
    background-image: url(back.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    }


    .box
    {
       
        margin: 80px; /* abstand außerhalb*/
        padding: 30px; /* abstand innerhalb*/
        width: auto;    /* länge breite*/
        height: auto;
        border-radius: 20px; 
        background-color: rgba(0, 0, 0, 0.4);
       
        color: white; /*Schriftfarbe*/
    }

;

这里没有Bootstrap

这里有 Bootstrap 样式表

我的主要 index.php 看起来像这样:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Dashborad</title>

    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> 


    <script type="text/javascript" src="/placeholder"></script>
 
</head>

<body>
    <div class = "box">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</body>

Bootstrap 样式表为 body 和许多其他元素(阅读 https://getbootstrap.com/docs/5.1/content/reboot/)设置样式,您的样式表不会触及这些元素。此外,如果您不希望 Bootstrap 覆盖您的样式,正确的方法是 始终 包含您的样式表 after Bootstrap.

您可以通过设置适当的 CSS 变量的值来去除正文背景:

body{
  --bs-body-bg: transparent;
}

这是一个工作示例:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
  html {
    background-image: url(https://via.placeholder.com/1600);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  body {
    --bs-body-bg: transparent;
  }
  
  .box {
    margin: 80px;
    /* abstand außerhalb*/
    padding: 30px;
    /* abstand innerhalb*/
    width: auto;
    /* länge breite*/
    height: auto;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    /*Schriftfarbe*/
  }
</style>

<div class="box">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
</div>