我使用 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>
最佳答案
您需要为切换器图标指定 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
关于javascript - Bootstrap Alpha 4 导航栏点击不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43235221/