引导导航栏:如何使外部搜索栏正确出现在扩展的导航栏中

Question

我有一个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;
}

https://jsfiddle.net/tL09xuoy/

Answer 1

任何不想在较小屏幕上的导航栏中显示的内容都可以放在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>