0
你好我无法搞清楚为什么导航栏菜单在导航栏被折叠时不会打开。我正在使用Angular 4(cli),Bootstrap 4.0.0-beta和sass。我还使用NGX的自举,如果该事项引导程序导航栏不会切换
HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-toggleable-md">
<div class="container">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/view']">View
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link"[routerLink]="['/upload']">Upload</a>
</li>
<li class="nav-item dropdown" dropdown>
<a dropdownToggle class="nav-link dropdown-toggle">
Print
</a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" (click)="onPrint(1)">Landscape</a></li>
<li role="menuitem"><a class="dropdown-item" (click)="onPrint()">Portrait</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
角cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.scss"
],
"scripts": [
],
styles.scss
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/font-awesome/scss/font-awesome';
我还创建了plunkr
http://embed.plnkr.co/2CYpsoQAQEOPljR17Pjq/
啊我明白了。我试图避免包括jQuery,因为我正在使用角。有没有其他的方式来做到这一点,而不包括它? – derrickrozay
不幸的是,如果你想使用涉及JavaScript的引导程序的任何元素(nav都是这样)。从他们的文档中:“确保首先放置jQuery和Tether,因为我们的代码依赖于它们”。如果你想在Bootstraps导航中避免使用js,你可以考虑使用类似这样的东西:http://thednp.github.io/bootstrap.native/ –
将jquery包含在角度应用中没有任何问题。特别是如果你想要使用依赖于jquery的东西。只是不要在你的应用中使用原生jQuery。如果你真的不想包含jquery,为什么不使用material2?它的发展比bootstrap4更进一步 –