Использование Bootstrap 4.1 Я построил панель навигации, которая падает, когда экран меньше средней ширины, примерно так:
<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>
Теперь я хочу сделать встроенные элементы управления поиском, когда экран большой или большой, но когда он меньше, я хочу, чтобы элементы управления поиском работали как выпадающий список.Когда вся панель навигации свернута, имеет смысл также отображать элементы управления поиском в строке, без раскрывающегося списка.
Изначально я думал, что поведение, по-видимому, представляет собой комбинацию того, что делает компонент свертывания и компонент раскрывающегося списка., но развал не является отзывчивым компонентом - у него нет точек останова.Тогда я подумал, что, может быть, я мог бы использовать navbar-expand- * и collapse, но это означает, что я бы по сути вложил navbar-expand в родительский navbar-expand, и у меня возникли проблемы с этим.Это кажется возможным?