Bootstrap Alpha 4导航栏在单击时不起作用

Question

我使用Bootstrap 4编写了以下导航栏代码。1.我无法弄清楚为什么3栏图标不会在右侧显示。2.为什么在链接上的onclick不能正确触发。 我必须单击该链接，然后单击窗口上其他任何位置，以使该链接带有下划线。 3.我无法将菜单项向右对齐

 $('.nav-link').on('click', function () { $('.active').removeClass('active'); $(this).addClass('active'); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-toggleable-md"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navigation-menu" aria-controls="navigation-menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">WELCOME</a> <div class="navbar-collapse collapse" id="navigation-menu"> <div class="navbar-nav mr-auto"> <a class="nav-item nav-link active" href="#section1">link1</a> <a class="nav-item nav-link" href="#section2">link2</a> </div> </div> </nav> 

Answer 1

您需要为切换图标指定navbar-light或navbar-inverse ，并显示活动链接。

<nav class="navbar navbar-light navbar-toggleable-md">

要么

<nav class="navbar navbar-inverse navbar-toggleable-md">

http://www.codeply.com/go/HZBegMbGii

另外， ml-auto将用于将navbar-nav到右侧

Answer 2

“雕文”已从Bootstap 4中删除。

删除了Glyphicons图标字体。 如果需要图标，则可以使用以下选项：Glyphicons Octicons字体的上游版本

通过： https : //v4-alpha.getbootstrap.com/migration/#components

解决方法是手动包括Glyphicons css文件。