Bootstrap导航栏:在较小的设备上不显示任何内容 [英] Bootstrap navbar: nothing is displayed on smaller devices

问题描述

在中间的带有徽标图像的导航栏在较大的屏幕上确实可以很好地工作，但是在较小的屏幕上，包括徽标图像在内的所有内容都消失了(并且汉堡包无法显示)有人知道解决此问题的方法吗?

This nav bar with logo image in the middle works really well on larger screens but on smaller screens, everything disappears including logo image (and the hamburger fails to be displayed) Does anyone know a fix for this issue?

这里是链接: 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" -->

推荐答案

它在那里，但是您没有看到，因为没有背景色.

It's there but you're not seeing because there is no background-color..

使用 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用于深色导航栏.

navbar-default is gone. Now use navbar-light bg-light of for a light colored navbar, or navbar-dark bg-dark for a dark colored navbar.

另请参阅: Bootstrap 4更改汉堡包切换器颜色

这篇关于Bootstrap导航栏:在较小的设备上不显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！