小编Jac*_*ers的帖子

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