b-nav-form不会与垂直导航栏叠加，而是水平渲染

Posted 2021-05-03

我正在尝试为我们的文档开发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>

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

答案

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