twitter-bootstrap – Bootstrap NavBar无法在.Net Core Angular
发布时间:2020-12-17 21:30:10 所属栏目:安全 来源:网络整理
导读:我使用以下命令安装了dotnet SPA模板: dotnet new --install Microsoft.AspNetCore.SpaTemplates::* 然后我创建了一个新的Angular应用程序: dotnet new angular 在恢复包,构建和运行时,我注意到模板的导航栏有些奇怪. Picture. 导航栏设置在页面的侧面,而
我使用以下命令安装了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仍然在屏幕的一侧,并掩盖了我的其余内容. 我在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中添加
import’bootstrap’; 并运行webpack (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |