twitter-bootstrap - Bootstrap NavBar 在 .Net Core Angular SPA 模板中不起作用

Question

我使用以下方法安装了 dotnet SPA 模板:

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

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

dotnet new angular

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

在 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>

显然，我认为问题在于导航菜单在 col-sm-3 内，而路由器 socket 在 col-sm-9 内。我对其进行了更改，以便导航菜单位于其自己的行中，并具有全宽列，并且与路由器导出相同:

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

但是，这并没有解决问题。相反，导航菜单保留在屏幕的一侧，并掩盖了我的其余内容。 Picture .

我在 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 中重现此问题应该非常容易...

关于在这个项目模板中获得一个工作的、顶部固定的导航栏有什么想法吗？

Answer 1

在 boot-client.ts 添加 导入“Bootstrap ”；

然后运行 ​​webpack