b-nav-form 不会与垂直导航栏堆叠，而是水平呈现答案

【问题标题】：b-nav-form won't stack with vertical navbar and instead renders horizontallyb-nav-form 不会与垂直导航栏堆叠，而是水平呈现
【发布时间】：2019-02-08 09:12:07
【问题描述】：

我正在尝试为我们的文档开发一个 Wiki 布局，问题是当垂直定位导航时，内联表单不遵循垂直样式而是呈现在导航旁边。

<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>

任何想法我做错了什么？（出于安全原因，我省略了内容）

【问题讨论】：

你能添加一个你得到的结果的截图吗？
@boussadjra 图片已添加。
我试过你的代码 sn-p here 我得到了输入和按钮，当我调整屏幕大小时，将显示汉堡菜单并隐藏表单，你想要什么
我想你想让汉堡菜单和表单在同一行水平对齐
移动显示器上的汉堡菜单工作正常，问题是我希望表单作为垂直导航栏的一部分，与桌面上的其他所有内容垂直对齐，目前，它似乎在单独的列中:)

标签： vue.js bootstrap-vue

【解决方案1】：

我修复它的方法非常简单。我在导航项和表单周围添加了一个<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>

【讨论】：