Bootstrap 4 可切换导航栏 [英] Bootstrap 4 toggleable navbar
本文介绍了Bootstrap 4 可切换导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试从 Bootstrap 3.x 迁移到 4,但我在使用新导航栏时遇到了问题.无论我选择 navbar-toggleable-x 的哪个选项,导航栏总是显示汉堡按钮,就像它被折叠一样.
此 HTML 文档演示了我的问题.我在官方文档页面上得到了它.
<头><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0LQFAsjNJ0lyAFAsJnxtz"="匿名"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4N.;头部><身体><nav class="navbar navbar-toggleable-md navbar-light bg-faded"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>按钮><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarNavDropdown"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉链接</a><div class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>
</nav>