b-nav-form не будет совмещаться с вертикальной панелью навигации и вместо этого будет отображаться горизонтально

Я пытаюсь разработать вики-макет для нашей документации, проблема в том, что при вертикальной ориентации навигации встроенная форма не соответствует вертикальному стилю и вместо этого отображается рядом с навигацией.

<div class="border-right">
            <b-navbar toggleable="md" type="light">
                <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
                <b-collapse is-nav id="nav_collapse">
                    <b-navbar-nav vertical class="bd-sidebar">
                        <b-nav-form>
                            <b-form-input v-model={this.keyword} placeholder="Search by keyword..."></b-form-input>
                            <b-input-group-append >
                                <b-btn on-click={this.clearModel} variant="secondary">Clear</b-btn>
                            </b-input-group-append>
                        </b-nav-form>
                        <WikiNavItem contents={this.availableContents} layer={0} classes={this.classes} />
                    </b-navbar-nav>
                </b-collapse>
            </b-navbar>
        </div>

Любые идеи, что я делаю неправильно? (Я опустил контент из соображений безопасности) Результат выдачи


vue.js bootstrap-vue
person UncountedBrute    schedule 03.09.2018    source источник
comment
не могли бы вы добавить скриншот результата, который вы получили?   -  person Boussadjra Brahim    schedule 03.09.2018
comment
Добавлено изображение @boussadjra.   -  person UncountedBrute    schedule 03.09.2018
comment
я попробовал ваш фрагмент кода здесь, и я получаю ввод и кнопку, и когда я изменяю размер экрана, гамбургер меню будет показано, а форма будет скрыта, что вы хотите именно   -  person Boussadjra Brahim    schedule 03.09.2018
comment
я думаю, вы хотите, чтобы меню гамбургера и форма были выровнены по горизонтали в одной строке   -  person Boussadjra Brahim    schedule 03.09.2018
comment
Меню гамбургера на мобильном дисплее работает нормально, проблема в том, что я хочу, чтобы форма была частью вертикальной панели навигации, выровненной по вертикали со всем остальным на рабочем столе, что на данный момент кажется в отдельном столбце :)   -  person UncountedBrute    schedule 03.09.2018
comment
я понял, что вы хотите, чтобы ваша форма находилась под элементами панели навигации   -  person Boussadjra Brahim    schedule 03.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

То, как я это исправил, было чрезвычайно простым. Я добавил <div> вокруг элементов навигации и формы, и это остановило странное возникновение css.

<b-navbar toggleable="md" variant="light" type="light">
                <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
                <b-collapse is-nav id="nav_collapse">
                    <b-navbar-nav vertical class="bd-sidebar">
                        <div>
                            <b-nav-form>
                                <b-input-group>
                                    <b-form-input v-model={this.keyword} placeholder="Search by keyword..."></b-form-input>
                                    <b-input-group-append>
                                        <b-btn on-click={this.clearModel} variant="secondary">Clear</b-btn>
                                    </b-input-group-append>
                                </b-input-group>
                            </b-nav-form>
                            <WikiNavItem contents={this.availableContents} layer={0} classes={this.classes} />
                        </div>
                    </b-navbar-nav>
                </b-collapse>
            </b-navbar>
person UncountedBrute    schedule 05.09.2018