Bootstrap 4.x выпадающий navbar на средней точке останова, расширенный на большой точке останова - PullRequest
0 голосов
/ 12 октября 2018

Использование 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, и у меня возникли проблемы с этим.Это кажется возможным?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...