我在引導后在 html 中添加了我的 css 檔案，但我的 css 沒有應用到頁面上。是什么原因？我不想將隱藏卡類添加到 div，但它不起作用，即使我嘗試更改簡單的背景添加!important什么也沒發生。
HTML：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a href="admin-dashboard.php" class="navbar-brand py-2">BOOKWARM</a>
<form class="d-flex ms-auto mx-3">
<!--search-->
<input class="form-control" type="search" placeholder="Search books.." id="search-box" aria-label="Search">
<button class="btn btn-light" id="search" type="button"><i class="bi bi-search"></i></button>
</form>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle"></i>
</button>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</nav>
<a class="btn btn-primary " data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<!-- card --->
<div class="offcanvas bg-dark sidebar-nav offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header ">
<div class="user-display">
<img src="./image/avatar.jpg" class="profile-picture" alt="">
<h4 class="name"> Welcome, Joe</h4>
</div>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!--Daily Top -->
<div class="top-today">
<div class="d-flex justify-content-between">
<h1>Top Books Today </h1>
<div class="buttons">
<button class="btn button left-btn ">
<i class="bi bi-caret-left-square-fill"></i>
</button>
<button class="btn button right-btn">
<i class="bi bi-caret-right-square-fill"></i>
</button>
</div>
</div>
<!--first card-->
<div class="d-flex justify-content-around">
<div class="card my-4" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title" id="">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!--scd card-->
<div class="card my-4" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!--third card-->
<div class="card my-4" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="results book-card" id="results">
</div>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
</html>
CSS：
body{
overflow: auto !important;
}
.sidebar-nav{
width: 270px;
transform:none;
visibility: visible !important;
top: 62px;
height: calc(100%-62px);
color: white !important;
}
.user-display{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.name{
margin: 3px;
}
.profile-picture{
width: 130px;
height: 130px;
border-radius: 50%;
}
.hide-cards{
visibility: hidden !important;
}
.book-cover{
align-items: center;
}
.book-card{
margin-left: 280px;
}
.top-today{
margin-left: 280px;
}
#text{
font-size: 250px;
}
@media (min-width: 992px) {
body {
overflow: auto !important;
}
.offcanvas-backdrop::before{
display: none;
}
}
uj5u.com熱心網友回復：
嘗試更正您到<link rel="stylesheet" href="./dashboard.css">, 或 的路徑<link rel="stylesheet" href="../dashboard.css">。通常，您的問題與檔案位置路徑有關。
uj5u.com熱心網友回復：
在這里，您沒有hide-cards向引導卡添加類，這就是樣式未應用于卡的原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396422.html
下一篇：如何更改選項卡選單的顏色