在移动设备中看不到引导程序导航栏切换按钮

Question

我在我的网站上使用Twitter Bootstrap，它上面有一个固定的导航栏。当我在桌面浏览器中调整窗口大小时，一切都很好。当我在移动设备上打开同一个网站时，我可以看到navbar-brand但不能看到切换按钮。我发布截图以便更好地理解（第一个是桌面firefox，第二个是android）：

这让我发疯了!!!

守则：

.navbar-floating {
  background: black;
  color: #5b5656;
  width: 100%;
  border-radius: 0;
}
.navbar-floating .navbar-brand {
  color: #810000;
  font-size: 20px;
  text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
  content: ' | ';
  color: #810000;
  position: relative;
  top: -3px;
}
#floating-nav {
  position: fixed;
  /* display: none; */
  top: 0;
  width: 100%;
  height: 50px;
}
#floating-nav.navbar {
  min-height: 1px;
}
#floating-nav ul li a {
  font-size: 20px;
}
#floating-nav ul li a:hover {
  background: none;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">

<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hidden-nav">
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand scroll-top" href="#">DSA Media Group</a> </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="hidden-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#" class="scroll-link" data-id="slides">Home</a></li>
        <li><a href="#" class="scroll-link" data-id="about">Agency</a></li>
        <li><a href="#" class="scroll-link" data-id="capabilities">Capabilities</a></li>
        <li><a href="#" class="scroll-link" data-id="projects">Projects</a></li>
        <li><a href="#" class="scroll-link" data-id="clients">Clients</a></li>
        <li><a href="#" class="scroll-link" data-id="contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container --> 
</nav>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>

我做错了什么？非常感谢任何帮助。

Answer 1

只需将 navbar-default 类添加到包含<ul>元素的div中，如下所示：

<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
  <ul class="nav navbar-nav">
      ....
  </ul>
</div>

Answer 2

尝试将.navbar-dark用作

<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
  <div class="container">
    .........
  </div>
</nav>

Answer 3

它在您的引导CSS的内部。默认情况下，它定义为对md隐藏。您要做的就是在样式页面中创建新行。.navbar-expand-md .navbar-toggler{display: block !important;}

Answer 4

对我来说，解决方案真的很烦

将navbar-expand-sm侧的navbar-expand-lg更改为<nav class=