导航栏在中等（768px）处消失 - 引导 3.3.7答案

【问题标题】：navbar disappears at medium (768px) - bootstrap 3.3.7导航栏在中等（768px）处消失 - 引导 3.3.7
【发布时间】：2019-12-28 21:12:01
【问题描述】：

我的页面上有两个导航栏。第一个正在工作，但第二个没有。我有以下第二个代码：

                  <nav class="navbar navbar-default">
                  <!-- <div class="container-fluid"> -->
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
         <span class="hidden-md hidden-lg"><a class="navbar-brand" href="#"> PRODUCTS >>  </a></span>
                      <button type="button" class="navbar-toggle1 collapsed" data-toggle="collapse" data-target="#cat-nav-mega">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>                  
                      </button>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="cat-nav-mega">
                      <ul class="nav navbar-nav">
                          <li class="dropdown menu-large">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SCOTTCREW'S OWN SILICONE MOLDS <i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu megamenu" role="menu">
                                  <li>

可以在以下位置查看实际工作页面（该站点目前正在开发中，而不是实际站点）：

https://www.scottcrewcandlesupply.com/agoracart55/agora.cgi?keywords=books#

谁能告诉我为什么导航不显示在中等以及我是如何可以解决这个问题吗？

谢谢！

【问题讨论】：

标签： css navbar jquery-mobile-navbar

【解决方案1】：

在你的主要 css 类上你有这个：

如果屏幕尺寸 b低于 1200 像素，您的 cat navbar 将被隐藏（基于 responsive.css 上的 css 代码）：

@media (max-width:1200px)
 {
   .navbar-collapse.collapse
     {
       display: none!important;
     }
}

所以你的第一个导航栏有一个响应式 css 并且只有在屏幕大于 1200 像素时才可见。

关于第二个导航栏：

如果只有屏幕大于 768px，就会在 style.css 中显示

@media (min-width: 768px) {
      navbar-toggle1 {
    display: none;
}

所以这两个@media大小之间是有差距的，如果屏幕大于768px小于1200px就没有navbar。

无论如何，要修复您要求的导航栏，请执行以下步骤： 1-

 .navbar-toggle1 {   // at style.css line 68
display: none;
 }

2- 将 hidden-lg 添加到此：

 <`a href="#" class="navbar-brand hidden-lg"> PRODUCTS &gt;&gt;  </a>`

3- 和 hidden-lg 到这个

<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
 class="navbar-toggle1 collapsed hidden-lg">

4- 移除 hiden-md 并添加一个新的类名，例如 navbarNew

最后他们必须像打击一样：

<span class="navbarNew"><a href="#" class="navbar-brand hidden-lg">
 PRODUCTS &gt;&gt;  </a></span>

和

<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
 class="navbar-toggle1 collapsed hidden-lg">

而且效果很好:)

【讨论】：