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

时间:2018-09-03 10:11:03

标签: vue.js bootstrap-vue

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

有什么主意我做错了吗? (出于安全原因,我省略了内容) Result of issue

1 个答案:

答案 0 :(得分:0)

我修复它的方式非常简单。我在导航项和表单周围添加了SELECT m.emp_id AS `Empid` , d.dt AS `AbsentDate`, (CASE WHEN p.punch_status IS NULL THEN 'A' ELSE p.punch_status END ) s FROM ( SELECT DATE(t.added_date) AS dt FROM pmc_attendance t WHERE date(t.added_date) >= '2018-09-01' AND date(t.added_date) < DATE_ADD( '2018-09-05' ,INTERVAL 1 DAY) GROUP BY DATE(t.added_date) ORDER BY DATE(t.added_date) ) d CROSS JOIN tbl_admin_users m LEFT JOIN pmc_attendance p ON date(p.added_date) >= d.dt AND date(p.added_date) < d.dt + INTERVAL 1 DAY AND p.emp_id = m.emp_id WHERE p.emp_id IS NULL and m.emp_id='000838' group by d.dt ORDER BY m.emp_id , d.dt ,它阻止了奇怪的CSS发生。

<div>