我正在为我的网站设计一个模板，但作为Bootstrap 5的新手，我遇到了一个小问题。具体来说，我有一个页脚，我想适合我的侧边栏的整个宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
<style>
</style>
</style>
</head>
<body>
<div class="container-fluid ">
<div class="row flex-nowrap ">
<div class="col-auto px-0 ">
<div id="sidebar" class=" collapse collapse-horizontal show border-end ">
<div id="sidebar-nav" class=" d-flex list-group border-0 rounded-0 text-sm-start min-vh-100 ">
<!-- BRANd content goes in here -->
<a href="/" class="d-flex align-items-center pb-sm-3 mb-md-0 me-md-auto text-decoration-none">
<span class="fs-4 ">Clinique Mangement</span>
</a>
<!-- sidebar menu content goes in here -->
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate " data-bs-parent="#sidebar"> <i class="fs-4 bi-house-door"></i> <span>Dashboard</span> </a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate " data-bs-parent="#sidebar"><i class="fs-4 bi-calendar-event"></i> <span >Appointments</span> </a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate " data-bs-parent="#sidebar"> <i class="fs-4 bi-people"></i> <span>Doctors</span></a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate " data-bs-parent="#sidebar"><i class="fs-4 bi-people"></i> <span >Users</span> </a>
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate " data-bs-parent="#sidebar"> <i class="fs-4 bi-people"></i> <span>Patients</span> </a>
<div class="dropdown bg-dark">
<a href="#" class="list-group-item border-end-0 text-truncate dropdown-toggle bg-dark " data-bs-parent="#sidebar" data-bs-toggle="dropdown"> <i class="fs-4 bi-bar-chart-line"></i> <span>Reports </span></a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" data-bs-labelledby="dropdown">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
<!-- footer content goes in here -->
<div class=" d-flex py-sm-0 mt-sm-auto mx-auto ms-sm-0 flex-shrink-1 " data-bs-parent="#sidebar">
<ul class=" list-group list-group-horizontal ">
<li class="list-group-item "> <i class="fa fa-gear fa-lg"></i></li>
<li class="list-group-item list-style-position bg-dark text-white "> <i class="fa fa-arrows-alt fa-lg"></i></li>
<li class="list-group-item bg-dark text-white "> <i class="fa fa-eye-slash fa-lg"></i></li>
<li class="list-group-item bg-dark text-white "> <i class="fa fa-power-off fa-lg"></i></li>
</ul>
</div>
</div>
</div>
</div>
<!-- main content goes in here -->
<div class="col d-flex flex-column h-sm-100">
<main class="row ps-md-0 pt-0">
<a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none bg-light"><i class="fa fa-list-ul fa-lg py-2 p-1"></i> Menu</a>
<div class="page-header pt-3">
<h2>Bootstrap 5 Sidebar Menu - Simple</h2>
</div>
</main>
</div>
</div>
</div>
</body>
</html>下面是我的模板截图：
1条答案
按热度按时间hof1towb1#
您必须执行以下操作：
w-100添加到.list-group的父类flex-grow-1添加到.list-group中，并且每个.list-group-item请参见下面的片段。