Bootstrap NavBar无法在.Net Core Angular SPA模板中工作

Question

我使用以下命令安装了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>

显然,我认为问题在于导航菜单位于内部col-sm-3并且路由器插座位于其中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>

但是,这并没有解决问题.相反,navmenu仍然在屏幕的一侧,并掩盖了我的其余内容. 图片.

我尝试了HTML的各种其他配置,但app.component.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中添加import'bootstrap';

并运行webpack