由於某種原因，我的導航欄切換消失在768px，導航欄切換消失在768px

Question

。我不完全確定問題是什麼，但我認爲它與我的CSS和媒體查詢有關。我將在768px上發佈我的導航欄代碼和css以查詢我的查詢（我的媒體查詢就像這個@media屏幕和（max-width：768px），所以它應該包含768的權利？），但是我還將包含jsfiddle鏈接我所有的代碼都可以查看該頁面是否存在問題。這裏是我的導航欄的代碼

<nav class ="navbar navbar-transparent navbar-inverse navbar-fixed-top" id="navBarStyle" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle navbar-right"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index2.html"><i>Marvin</i></a> 
     </div> 
     <div class="side-collapse in"> 
      <nav role="navigation" class="navbar-collapse "> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
        <a href="html/about.html">About</a> 
        </li> 
        <li> 
        <a href="html/projects.html">Projects</a> 
        </li> 
        <li> 
        <a href="html/contact.html">Contact</a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</nav> 

CSS

@media screen and (max-width: 768px) 
{ 

    .side-collapse-container 
    { 
     width:100%; 
     position:relative; 
     right:0; 
     transition:left .4s; 
    } 

    .side-collapse-container.out 
    { 
     right:200px; 
    } 

    .side-collapse 
    { 
     top:50px; 
     bottom:0; 
     right:0; 
     width:200px; 
     position:fixed; 
     overflow:hidden; 
     transition:width .4s; 
    } 

    .side-collapse.in 
    { 
     width:0; 
    } 

    #navBarStyle 
    { 
     margin-top:.5%; 
    } 


} 

不能完全確定是什麼問題，我讀它可能是自舉本身就是一個問題。這裏是我的jsfid https://jsfiddle.net/marvstah/tLzorkdg/1/

重要的是，它工作正常，在各種規模的768少，但不是768

Answer 1

我們不必使用所有的造型。無論如何，我們有bootstrap，所以我們可以使用基本的Bootstrap導航儀？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Marvin</a> 
</div> 
<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div> 
    </div> 
</nav> 

Answer 2

您media-query最大寬度更改爲767px。

由於您使用的是bootstrap。 Botstrap.css在767px上有一些媒體查詢。它覆蓋你的。

這裏是工作Demo

@media screen and (max-width: 767px) 
 
{ 
 

 
    .side-collapse-container 
 
    { 
 
     width:100%; 
 
     position:relative; 
 
     right:0; 
 
     transition:left .4s; 
 
    } 
 

 
    .side-collapse-container.out 
 
    { 
 
     right:200px; 
 
    } 
 

 
    .side-collapse 
 
    { 
 
     top:50px; 
 
     bottom:0; 
 
     right:0; 
 
     width:200px; 
 
     position:fixed; 
 
     overflow:hidden; 
 
     transition:width .4s; 
 
    } 
 

 
    .side-collapse.in 
 
    { 
 
     width:0; 
 
    } 
 

 
    #navBarStyle 
 
    { 
 
     margin-top:.5%; 
 
    } 
 

 

 
}