Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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将用于push the navbar-nav to the right

Answer 2

＆＃34; Glyphicons＆＃34;已从Bootstap 4中删除。

删除了Glyphicons图标字体。如果您需要图标，一些选项是： Glyphicons的上游版本 Octicons 字体真棒

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

修复方法是手动包含Glyphicons css文件。

Bootstrap Alpha 4导航栏点击不起作用

2 个答案: