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?

Here's the link: 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" -->

回答1:

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

Use the ~~navbar-default~~ navbar-light or navbar-dark class:

<nav id="navbar-primary" class="navbar navbar-light bg-light" role="navigation">

or, add a background color:

#navbar-primary .navbar-nav { 
   background: #ededed;
}

or, darken the toggler:

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

https://www.codeply.com/go/QGDVIsAeda

Update for Bootstrap 4.0.0

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.

Also see: Bootstrap 4 Change Hamburger Toggler Color

来源：https://stackoverflow.com/questions/42188698/bootstrap-navbar-nothing-is-displayed-on-smaller-devices

标签

html

css

twitter-bootstrap

navbar

bootstrap-4