引导导航栏：在较小的设备上不显示任何内容

Posted 2023-03-05

【中文标题】引导导航栏：在较小的设备上不显示任何内容

【英文标题】：Bootstrap navbar: nothing is displayed on smaller devices

【发布时间】：2017-06-30 12:46:08

【问题描述】：

这个中间带有徽标图像的导航栏在大屏幕上运行良好，但在较小的屏幕上，包括徽标图像在内的所有内容都会消失（并且无法显示汉堡包） 有人知道解决此问题的方法吗？

这是链接：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"  ></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" -->

【问题讨论】：

您需要添加 navbar-default 或 navbar-inverse 或自己设置样式，因为您只使用 .navbar。

Bootstrap Menu Collapse working but isn't showing icons的可能重复

当我点击导航栏切换按钮（它是不可见的，但它在那里）时，导航栏显示出来了。

【参考方案1】：

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

使用 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 of 用于浅色导航栏，或navbar-dark bg-dark 用于深色导航栏。

---

另见：Bootstrap 4 Change Hamburger Toggler Color

【讨论】：

添加navbar-default 或navbar-light 有效，因为它们向主元素和子元素添加了多种样式。但是在主块中添加一个简单的背景颜色并不足以处理所有子元素的行为。