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

Question

这个中间带有徽标图像的导航栏在较大的屏幕上效果非常好，但在较小的屏幕上，包括徽标图像在内的所有内容都会消失(并且汉堡包无法显示( 有谁知道此问题的解决方法？

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

Answer 1

> 2022 年更新

Bootstrap 5 导航栏还需要navbar-light或navbar-dark才能显示汉堡包。

原始答案

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

使用 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://codeply.com/go/QGDVIsAeda

引导程序 4.0.0
的更新

navbar-default走了。现在，navbar-light bg-light 用于浅色导航栏，或navbar-dark bg-dark用于深色导航栏。

---

另请参阅：如何更改引导 4 导航栏按钮图标颜色？

Answer 2

对于那些在堆栈溢出上登陆此页面并且将引导程序与 Blazor Webassembly 一起使用的人来说，这是为你准备的。这个问题让我发疯，但我终于想通了。

在宽屏幕上，将显示导航栏，然后在使屏幕更窄的同时，将显示汉堡菜单按钮，

但随后使屏幕更窄，汉堡菜单按钮将消失。

发生这种情况的原因是，当我使用 Visual Studio 创建 Blazor Webassembly 项目模板时。模板的一部分是 MainLayout.razor 文件和 MainLayout.razor.css 文件。MainLayout.razor.css 文件中包含一个媒体查询，当宽度低于某个断点时，它会隐藏菜单。

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }
    .top-row.auth {
        justify-content: space-between;
    }
    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

我删除了该查询，现在一切正常。