Bootstrap 4可切换的导航栏 [英] Bootstrap 4 toggleable navbar
问题描述
我试图从Bootstrap 3.x迁移到4，并且遇到新导航栏的问题。无论我选择哪种navbar-toggleable-x选项，navbar总是显示汉堡包按钮，就像它折叠一样。
这个HTML文档演示了我的问题。我在官方文档页面上找到了它。
< html>
< head>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.cssintegrity =sha384- / Y6pD6FV / Vv2HJnA6t + vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6Mcrossorigin =anonymous>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.jsintegrity =sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1crossorigin =anonymous> < /脚本>
< / head>
< body>
< nav class =navbar navbar -tableable-md navbar-light bg-faded>
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarNavDropdownaria-controls =navbarNavDropdownaria-expanded = falsearia-label =切换导航>
< span class =navbar-toggler-icon>< / span>
< / button>
< a class =navbar-brandhref =＃> Navbar< / a>
< div class =collapse navbar-collapseid =navbarNavDropdown>
< ul class =navbar-nav>
< li class =nav-item active>
< a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>功能< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>定价< / a>
< / li>
< li class =nav-item dropdown>
< a class =nav-link dropdown-togglehref =http://example.comid =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded = 假 >
下拉链接
< / a>
< div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink>
< a class =dropdown-itemhref =＃>动作< / a>
< a class =dropdown-itemhref =＃>另一个动作< / a>
< a class =dropdown-itemhref =＃>其他东西在这里< / a>
< / div>
< / li>
< / ul>
< / div>
< / nav>
< / body>
< / html>
至于Bootstrap 4 beta ，
toggleable 已被替换为展开。 现在它是扩展断点，而不是切换断点，逻辑相应地改变，所以 navbar-toggleable-md 现在会是 navbar -expand-lg ..
https://www.codeply.com/go/Io0duaPkqz
< nav class = navbar navbar-expand-lg navbar-light bg-faded>
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarNavDropdownaria-controls =navbarNavDropdownaria-expanded = falsearia-label =切换导航>
< span class =navbar-toggler-icon>< / span>
< / button>
< a class =navbar-brandhref =＃> Navbar< / a>
< div class =collapse navbar-collapseid =navbarNavDropdown>
< ul class =navbar-nav>
< li class =nav-item active>
< a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>功能< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>定价< / a>
< / li>
< li class =nav-item dropdown>
< a class =nav-link dropdown-togglehref =http://example.comid =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded = 假 >
下拉链接
< / a>
< div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink>
< a class =dropdown-itemhref =＃>动作< / a>
< a class =dropdown-itemhref =＃>另一个动作< / a>
< a class =dropdown-itemhref =＃>其他东西在这里< / a>
< / div>
< / li>
< / ul>
< / div>
< / nav>
https://www.codeply.com/go/Io0duaPkqz
A 更多关于Bootstrap 4 将alpha 6转换为beta I'm trying to migrate from Bootstrap 3.x to 4 and I'm having problems with the new navbar. No matter which options for navbar-toggleable-x I choose, navbar always shows hamburger button, like it is collapsed. This HTML document demonstrates my problem. I got it on official documentation page.
As of Bootstrap 4 beta, Now that it's the "expand" breakpoint, and not the "toggle" breakpoint, the logic changes accordingly so https://www.codeply.com/go/Io0duaPkqz https://www.codeply.com/go/Io0duaPkqz A More on Bootstrap 4 changes from alpha 6 to beta 这篇关于Bootstrap 4可切换的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ navbar-expand * class，否则Navbar将默认为移动版，垂直折叠版。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<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="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<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">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
toggleable has been replaced with expand.navbar-toggleable-md would now be navbar-expand-lg..<nav class="navbar navbar-expand-lg 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="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<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">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
navbar-expand* class is needed if you want the navbar to expand horizontally, otherwise the Navbar defaults to the mobile, vertically collapsed version.
