背景和填充不适用，css不覆盖引导样式，当我保留容器样式时，css显示样式不适用。
检查以下代码：
body{
background-color: #f5d9d5;
font-family: 'Nunito' , sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<title>Document</title>
</head>
<body>
<div class="tcontainer bg-light p-2">
<img src="data:image/.." alt="">
<h4>ping pong score keeper</h4>
<div class="panel ">
<h3><span class="p1">0</span> to <span class="p2">0</span></h3>
<p>Use the buttons below to keep score</p>
<h4>playing to
<select class="form-select" aria-label="Default select example">
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option value="12">12</option>
</select></h4>
</div>
<button>P1 +1</button>
<button>P2 +2</button>
<button>Reset</button>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
3条答案
按热度按时间q8l4jmvw1#
尝试将! important添加到background-color css属性。您的CSS属性将被覆盖。添加! important将使结果如下所示：
zfycwa2u2#
链接CSS
然后尝试刷新
5jvtdoz23#
您尝试应用到tcontainer的bg-light类不起作用，因为您在这里使用的bootstrap版本（即bootstrap 3.4.1）不包含bg-light和bg-dark的定义。尝试更新bootstrap版本，因为我没有看到代码本身的错误。