我正在使用 Bootstrap 5.3，并试图找出如何将这个侧边栏折叠到中等尺寸以下的汉堡菜单后面。我已经使用内置类和实用程序尝试了各种方法，但它们都设计为与水平导航栏一起使用。因此，将它们添加到一定程度是有效的，但随后一切都会偏离（字面意思）
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-2">
<div id="app">
<nav class="navbar navbar-expand-md navbar-light shadow-sm p-0" id="topnav">
<div class="container">
<h1 class="m-0 text-uppercase">
<a class="navbar-brand" href="#">
Hello World
</a>
</h1>
</div>
</nav>
<main class="container py-4">
<div class="row">
<div class="col-md-2 py-md-1 px-md-0 me-md-2 bg-body shadow border-1">
<div class="row p-3 d-none d-md-flex">
<div class="col mr align-self-center">
Notice
</div>
</div>
<nav class="nav flex-column nav-pills" id="leftnav">
<a class="nav-link d-flex" href="#">Menu 1</a>
<a class="nav-link d-flex" href="#">Menu 2</a>
<a class="nav-link d-flex active" href="#">Menu 3</a>
<a class="nav-link d-flex" href="#">Menu 4</a>
<a class="nav-link d-flex" href="#">Menu 5</a>
</nav>
</div>
<div class="col-md-9 py-md-1 ms-md-2 bg-body justify-content-center shadow-sm">
Here's where the content goes.
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body></html>此 HTML 是多年前为 Bootstrap 3 或 4 开发的，并已逐渐修补以适用于现代版本。我愿意重新考虑整个结构（我已经在考虑移动到 Bootstrap 批准的水平导航栏以节省麻烦。）我不想拥有侧边栏的两个副本，这是我见过的一种方法在我可以在折叠侧边栏找到的一些非古老帖子中推荐。
好吧，我最终确实对布局进行了相当大的修改。 Bootstrap 5.1（？）中删除了对垂直导航栏的支持，因为它们引入了 offcanvas 组件，所以我使用了它并废弃了最外面元素上的行/列网格。发布答案以防将来对任何人有帮助。
@media (max-width: 767.98px) {
div#app .shadow-sm {
box-shadow: none !important;
}
}<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light shadow-sm p-md-0 bg-transparent" id="topnav">
<div class="container justify-content-start">
<button class="navbar-toggler me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftnav" aria-controls="leftnav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="m-0 text-uppercase">
<a class="navbar-brand" href="#">
Hello World
</a>
</h1>
</div>
</nav>
<main class="container-fluid d-flex h-100 py-md-4">
<nav id="leftnav" class="d-flex flex-column flex-shrink-0 offcanvas-md offcanvas-start py-md-1 px-md-0 me-md-2 bg-body shadow-sm">
<div class="offcanvas-header">
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#leftnav" aria-controls="leftnav" aria-label="Close"></button>
</div>
<div class="nav offcanvas-body nav-pills flex-column mb-auto">
<div class="row p-3 pt-0 d-none d-md-flex">
<div class="col-md-8 offset-1 align-self-center">
Notice
</div>
</div>
<a class="nav-link d-flex" href="#">Menu 1</a>
<a class="nav-link d-flex" href="#">Menu 2</a>
<a class="nav-link d-flex active" href="#">Menu 3</a>
<a class="nav-link d-flex" href="#">Menu 4</a>
<a class="nav-link d-flex" href="#">Menu 5</a>
</div>
</nav>
<div class="flex-fill py-md-1 ms-md-2 bg-body justify-content-center shadow-sm">
<div class="container">
Here's where the content goes.
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body></html>