bootstrap导航栏显示内联而不是块

Question

我使用this bootstrap theme制作了一个复制粘贴工作，但删除了一些不会改变任何东西的元素（来自dom）。无论如何，我的标题是内联而不是块显示..另外我应该提到我正在构建具有vue的app模板并将其作为组件插入的事实。

<template>
<div id="app">
    <Navigation :routeUri="this.$route.path.substring(1, 3)"/>
    <router-view class="content-wrapper"/>
</div>
</template>

那就是导航模板

<nav v-if="routeUri != ''" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav">
            <li class="nav-item" title="Dashboard">
                <router-link class="nav-link" to="/dashboard/">
                    <i class="fa fa-fw fa-dashboard"></i>
                    <span class="nav-link-text">Dashboard</span>
                </router-link>
            </li>
            <li class="nav-item" title="Dashboard">
                <router-link class="nav-link" to="/dashboard/">
                    <i class="fa fa-fw fa-dashboard"></i>
                    <span class="nav-link-text">Dashboard</span>
                </router-link>
            </li>
            <li class="nav-item" title="Dashboard">
                <router-link class="nav-link" to="/dashboard/">
                    <i class="fa fa-fw fa-dashboard"></i>
                    <span class="nav-link-text">Dashboard</span>
                </router-link>
            </li>
        </ul>
    </div>
</nav>

所以我的仪表板看起来与原版完全不同。