引导程序：汉堡图标始终存在答案

【问题标题】：Bootstrap: Hamburger Icon is always there引导程序：汉堡图标始终存在
【发布时间】：2018-04-23 14:00:59
【问题描述】：

我在我的第一个引导站点上，但遇到了问题。我的导航总是折叠的，即使在屏幕尺寸上也是如此。汉堡包图标有效，但它应该只存在于移动屏幕尺寸中。

大家可以帮帮我吗？

 <div class="header-nav clearfix">
           <nav class="navbar navbar-fixed-top">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
              </button>
              <div class="navbar-collapse collapse " id="navbarSupportedContent">
                 <ul class="nav">
                    <li class="nav-item">
                       <a class="nav-link" href="#">Über uns</a>
                    </li>
                    <li class="nav-item">
                       <a class="nav-link" href="#">Karriere</a>
                    </li>
                    <li class="nav-item">
                       <a class="nav-link" href="#">Downloads</a>
                    </li>
                    <li class="nav-item nav-item-gruen">
                       <a class="nav-link" href="#">Kontaktieren Sie uns!</a>
                    </li>
                 </ul>
              </div>
           </nav>
        </div>

【问题讨论】：

加一点代码会更好

标签： twitter-bootstrap navbar collapse hamburger-menu

【解决方案1】：

将此代码放入您的 Header 中，然后重试：

<meta name="viewport" content="width=device-width" />    
<meta http-equiv="X-UA-Compatible" content="IE=edge">

【讨论】：

不，很遗憾，没有任何改变。

【解决方案2】：

好的，我以前没有这样做过。希望是对的。

/* Header */
header{border-bottom:30px solid rgba(0,0,0,0.8);min-height:280px;}


/* Navigation */

.header-nav {background:rgba(0,0,0,0.8);}
.header-nav .nav {float:right;}
.nav li a{display:inline-block;padding: 25px 60px; color:#fff;}
.nav-item-gruen{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8eb73f+27,639d24+100 */
background: #8eb73f; /* Old browsers */
background: -moz-linear-gradient(top,  #8eb73f 27%, #639d24 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #8eb73f 27%,#639d24 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #8eb73f 27%,#639d24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8eb73f', endColorstr='#639d24',GradientType=0 ); /* IE6-9 */
}

<header>
         <div class="container-fluid  position-fixed">
            <div class="logo-box">
               <img src="images/logo-idh.jpg" alt="">
            </div>
    <div class="header-nav clearfix">
               <nav class="navbar navbar-fixed-top">
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="navbar-collapse collapse " id="navbarSupportedContent">
                     <ul class="nav">
                        <li class="nav-item">
                           <a class="nav-link" href="#">Über uns</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Karriere</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Downloads</a>
                        </li>
                        <li class="nav-item nav-item-gruen">
                           <a class="nav-link" href="#">Kontaktieren Sie uns!</a>
                        </li>
                     </ul>
                  </div>
               </nav>
            </div>         
           
         </div>
      </header>

【讨论】：