引导程序:汉堡图标总是在那里

Question

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

每个人都能帮我吗？

 <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> 

Answer 1

将此代码放入标头中，然后重试：

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

Answer 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>