![toggler]( "toggler")
本文介绍了Bootstrap 4 导航栏不显示导航栏项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
导航栏显示我的品牌，但不显示菜单项.Bootstrap 4 依赖项的顺序正确(Bootstrap 4 CSS -> Jquery -> Popper -> Bootstrap JS).
中引用的元视点HTML:
<a class="navbar-brand" onclick="goBack()"><img src="icon.jpg" width="30" height="30" class="d-inline-block align-top" alt="">回到课程</a><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><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="#">Link</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
</nav>
CSS:
@font-face {字体系列:Helvetica；src: url(HelveticaNeue BlackCond.ttf);}@media(最小宽度:992px){.navbar-nav li a { line-height: 80px;}}@media(最大宽度:991px){.navbar-brand { 浮动:无；}}.navbar-brand {字体系列:'Helvetica';字体粗细:500；}.容器 {填充顶部:2em；}
解决方案
那是因为您的代码中缺少 navbar-expand-* 类.
我在下面的代码片段中添加了 navbar-expand-md.此类在中等 (md) 或更大的屏幕上扩展导航栏(从默认折叠状态开始).
如果您将其更改为 navbar-expand-lg，则扩展将从大 (lg) 屏幕开始等.
如果您希望导航栏项目永久展开，即在所有屏幕尺寸上，请使用 navbar-expand 类.
您还需要一个 toggler 以便在导航栏折叠时打开和关闭导航栏项目.您的代码中目前也缺少该切换器.
点击下面的运行代码片段"并展开到整页进行测试:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><nav class="navbar navbar-expand-md navbar-light bg-faded"><a class="navbar-brand" onclick="goBack()"><img src="https://placehold.it/30" width="30" height="30" class="d-inline-block align-top" alt="">回到课程</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><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="#">Link</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
</nav>
Navbar is showing my branding, but not showing menu items. Bootstrap 4 dependencies are in right order (Bootstrap 4 CSS -> Jquery -> Popper -> Bootstrap JS).Meta viewpoint referenced in <head>.
HTML:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" onclick="goBack()">
<img src="icon.jpg" width="30" height="30" class="d-inline-block align-top" alt="">
Back to Course
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
CSS:
@font-face {
font-family: Helvetica;
src: url(HelveticaNeue BlackCond.ttf);
}
@media (min-width: 992px) {
.navbar-nav li a { line-height: 80px; }
}
@media (max-width: 991px) {
.navbar-brand { float: none; }
}
.navbar-brand {
font-family: 'Helvetica';
font-weight: 500;
}
.container {
padding-top: 2em;
}
解决方案
That's because the navbar-expand-* class is missing in your code.
I've added navbar-expand-md in the code snippet below. This class expands the navbar (from the default collapsed state) on screens that are medium (md) or larger.
If you change that to navbar-expand-lg, the expansion will happen form large (lg) screens onwards etc.
And if you want your navbar items to be expanded permanently i.e. on all screen sizes, use the navbar-expand class.
You also need a toggler in order to open and close the navbar items when the navbar is collapsed. That toggler is currently missing in your code as well.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand" onclick="goBack()">
<img src="https://placehold.it/30" width="30" height="30" class="d-inline-block align-top" alt="">
Back to Course
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
这篇关于Bootstrap 4 导航栏不显示导航栏项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！