我有一个带有搜索栏的 Bootstrap 5 导航栏，然后是一个通知下拉菜单，然后是一些可折叠的按钮，我的问题是如何使这个搜索栏正确显示在导航栏的扩展版本中，并在导航栏出现时隐藏已折叠（与按钮一起，让通知下拉菜单始终可见）？
HTML：
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Site</a>
<form id="search" class="form-inline d-flex me-auto">
<input class="form-control" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">Go</button>
</form>
<div class="d-flex">
<div class="dropdown">
<a class="btn btn-secondary me-1" role="button" id="dropdownMenuLink"
data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<button class="navbar-toggler ms-1" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="btn btn-success ms-1 me-1 mt-2 mb-2">Button One</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-secondary ms-1 me-1 mt-2 mb-2">Button Two</a>
</li>
<li class="nav-item">
<form name="button-three" class="ms-1 me-1 mt-2 mb-2">
<button type="submit" class="btn btn-danger">Button Three</button>
</form>
</li>
</ul>
</div>
</div>
</nav>
CSS：
#navbarSupportedContent {
max-width: intrinsic; /* Safari/WebKit uses a non-standard name */
max-width: -moz-fit-content; /* Firefox/Gecko */
max-width: -webkit-fit-content; /* Chrome */
max-width: fit-content;
}
.btn {
white-space: nowrap;
}
答案 0 :(得分：0)
您不想在较小屏幕的导航栏中显示的任何内容都可以放在 navbar-collapse 分区中。由于您在搜索表单和其他链接之间有通知图标，因此您需要有单独的折叠分区。如果您将导航栏切换从使用 ID 更改为使用类名（我使用了 . dual-collapse），则引导程序将折叠所有内容。
对于不想折叠的内容（例如通知图标），您可以使用弹性顺序将其移出折叠内容。
我将折叠点从您的 sm 切换到 md，因为在 sm 断点处似乎不太适合，但您可以将其改回来。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<style>
#navbarSupportedContent {
max-width: intrinsic;
/* Safari/WebKit uses a non-standard name */
max-width: -moz-fit-content;
/* Firefox/Gecko */
max-width: -webkit-fit-content;
/* Chrome */
max-width: fit-content;
}
.btn-width-md {
width: 7.5rem
}
@media (min-width:768px) {
.btn-width-md {
width: auto;
}
}
.btn {
white-space: nowrap;
}
</style>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<div class=" flex-grow-1">
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="dual-collapse order-5 order-md-0 collapse navbar-collapse">
<form id="search" class="input-group form-inline my-3 my-md-0 me-auto">
<input class="form-control flex-grow-0 w-auto mr-md-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="button" id="button-addon2"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="dropdown order-2">
<a class="btn btn-secondary me-1" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-lg has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications">
<ul class="list-unstyled ps-1">
<li><a href="#">Notification one</a></li>
<li><a href="#">Notification two</a></li>
</ul>
</div>
</div>
</div>
<div class="dual-collapse order-4 collapse navbar-collapse flex-grow-0">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="btn btn-success btn-width-md ms-1 me-1 mt-2 mb-2">Button One</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-secondary btn-width-md ms-1 me-1 mt-2 mb-2">Button Two</a>
</li>
<li class="nav-item">
<form name="button-three" class="btn-width-md ms-1 me-1 mt-2 mb-2">
<button type="submit" class="btn btn-danger">Button Three</button>
</form>
</li>
</ul>
</div>
<div class="order-3">
<button class="navbar-toggler ms-1" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse" aria-controls="dual-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>