这个带有徽标图像的导航栏在较大的屏幕上工作得很好,但在较小的屏幕上,一切都消失了,包括徽标图像(并且汉堡包无法显示)有没有人知道这个问题的修复?
这里是链接:http://codepen.io/davidcochran/pen/Fkwys
#navbar-primary .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary .navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}

<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
&#13;
答案 0 :(得分:0)
它在那里,但你没有看到,因为没有背景颜色..
使用 navbar-default
navbar-light
或navbar-dark
类:
<nav id="navbar-primary" class="navbar navbar-light bg-light" role="navigation">
或,添加背景颜色:
#navbar-primary .navbar-nav {
background: #ededed;
}
或,使转换器变暗:
.navbar-toggle .icon-bar {
background-color: rgb(136, 136, 136);
}
https://www.codeply.com/go/QGDVIsAeda
Bootstrap 4.0.0更新
navbar-default
消失了。现在使用navbar-light bg-light
用于浅色导航栏,或navbar-dark bg-dark
用于深色导航栏。