Html ASP Net Core Angular-具有引导4而不是3的默认项目（侧菜单）

我正在尝试用Angular6构建一个网站，当在大屏幕上观看时有一个垂直导航栏，在手机上有一个带下拉菜单的顶部导航栏。与引导4。我在网上找到了多个示例，但它们似乎都过于复杂，或者在没有nav模板的情况下构建

ASP.Net Core中的示例项目带有Angular，它有一个我想要的导航栏，但它是用Bootstrap3编写的。我试图将其转化，但没有成功，这就是我请求您帮助的地方

原始代码与引导3。如果已安装dotnet core，则可以使用

dotnet new angular-o my new app

创建项目

HTML

这是我试图转换它的方法。我使用bootstrap4文档作为模板

<div class="main-nav">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="navbar-collapse collapse" id="navbarNavAltMarkup">
            <div class="nav flex-column">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>
</div>

问题是标题和导航在同一行上，而不是在单独的行上。我怎样才能做到这一点

---

（移动视图似乎也不起作用，但我还没有尝试。我正在尝试先让桌面视图起作用）

看起来我搜索的时间不够长。我在这里找到了解决方案：

其中一个关键的变化是css中的这一点

.flex-column {
  width: 100%;
}

<div class="main-nav">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="navbar-collapse collapse" id="navbarNavAltMarkup">
            <div class="nav flex-column">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>
</div>

.flex-column {
  width: 100%;
}