<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="d-flex flex-nowrap flex-fill minw-0">
<a class="app-link navbar-brand text-truncate mr-auto mt-auto mb-auto" href="../"><img class="app-logo mt-auto mb-auto align-middle" src="applogo.svg">Test</a>
<button class="navbar-toggler my-auto ml-auto" aria-expanded="false" aria-controls="navbarCollapse" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target=".navbar-collapse.sample3">
<span class="navbar-toggler-icon"/>
</button>
</div>
<div class="collapse navbar-collapse sample3 flex-wrap d-md-inline-flex justify-content-end">
<ul class="navbar-nav nav flex-nowrap text-nowrap">
<li class="active nav-item"><a class="nav-link icon-mmnu-home" href="../../../"><label>Home</label></a></li>
...
<li class="nav-item flex-fill">
<div class="input-group flex-nowrap flex-fill">
<input class="nav-input form-control h-auto py-1 my-0" aria-describedby="basic-addon1" aria-label="Search" type="text" placeholder="Search" />
<button class="btn btn-success input-group-append py-1 my-0" type="button"><i class="icon-mmnu-search small"/></button>
</div>
</li>
</ul>
</div>
</nav>
为了减少不动产,我将搜索组件改为下拉列表。大致如下:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="d-flex flex-nowrap flex-fill minw-0">
<a class="app-link navbar-brand text-truncate mr-auto mt-auto mb-auto" href="../"><img class="app-logo mt-auto mb-auto align-middle" src="applogo.svg">Test</a>
<button class="navbar-toggler my-auto ml-auto" aria-expanded="false" aria-controls="navbarCollapse" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target=".navbar-collapse.sample3">
<span class="navbar-toggler-icon"/>
</button>
</div>
<div class="collapse navbar-collapse sample3 flex-wrap d-md-inline-flex justify-content-end">
<ul class="navbar-nav nav flex-nowrap text-nowrap">
<li class="active nav-item"><a class="nav-link icon-mmnu-home" href="../../../"><label>Home</label></a></li>
...
<li class="nav-item flex-fill dropdown">
<a class="nav-link icon-mmnu-search dropdown-toggle" id="btnSearchDropDown" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown"><label>Search</label></a>
<div class="dropdown-menu dropdown-menu-right m-0 p-0" aria-labelledby="btnSearchDropDown">
<div class="input-group form-group flex-nowrap p-0 px-1 m-0">
<input class="nav-input form-control h-auto" aria-describedby="basic-addon1" aria-label="Search" type="text" placeholder="Search">
<button class="btn btn-success input-group-append" type="button"><i class="icon-mmnu-search small"></i></button>
</div>
</div>
</li>
</ul>
</div>
</nav>
现在我想做的是,当屏幕很大或更大时,使搜索控件内联,但当屏幕小于此值时,我希望搜索控件作为下拉列表。当整个导航栏折叠时,在没有下拉列表的情况下,也可以将搜索控件内联显示。
最初,我认为行为似乎是collapse组件和dropdown组件的组合,但是collapse不是一个响应组件,它没有任何断点。然后我想也许我可以使用navbar expand-*和collapse,但这意味着我实际上将在父navbar expand中嵌套一个navbar expand,而且我很难让它工作。这看起来可能吗?
