Twitter bootstrap 引导导航栏在.Net核心模板中不工作

我已使用以下工具安装了dotnet SPA模板：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

然后，我使用以下方法创建了一个新的Angular应用程序：

dotnet new angular

在恢复包、构建和运行时，我注意到模板的导航栏有些奇怪。 . 导航栏设置在页面的侧面，而不是普通的顶部导航栏。我的愿望是一个固定顶部导航栏

在

app.component.html

中，导航栏和路由器出口配置如下：

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

然而，这并没有解决问题。相反，navmenu保留在屏幕的一侧，并覆盖了我的其余内容。

我在

app.component.HTML

中尝试了其他各种HTML配置，但没有成功地让导航栏工作

以下是导航栏html：

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="['/home']">Brand</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/counter']">
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

切换导航
烙印

我在项目中没有涉及任何其他内容，因此如果您想尝试一下，在Visual Studio中重新创建此问题应该非常容易

关于在这个项目模板中获得一个工作的、顶部固定的导航条有什么想法吗？在boot-client.ts add中 导入“引导”

---

并运行网页包

如果启动新项目，可以使用以下模板：

---

这是JavaScript服务模板的副本，但它使用引导导航栏，而不是自定义侧导航菜单。

这是它与Tempalte的CSS的组合。默认情况下，模板设置为将左侧导航设置为所需导航。此操作非常完美，应该允许10次向上投票！几个小时在死胡同上走，直到我偶然发现了这个解决方案。谢谢

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="['/home']">Brand</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/counter']">
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>