簡體   English   中英

導航欄切換消失在768px

[英]navbar-toggle disappears at 768px

由於某些原因,我的導航欄切換開關消失在768px。 我不確定是什么問題,但我認為這與我的CSS和媒體查詢有關。 我將以768px發布我的導航條形碼和CSS(我的媒體查詢就像@media屏幕,(最大寬度: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

將您的media-query max-width更改為767px

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

這是工作中的演示

 @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%; } } 

只是好奇,它為您解決過嗎? 我遇到同樣的問題,但分辨率為767px。 我的視口在767像素和768像素上可以正常工作,但是在767像素上卻無法正常工作。 但據我觀察,最大寬度:767像素不包括767像素。 但在最小寬度/最大寬度上:768px都包括768px! 我正在拉頭發...

我們不需要使用所有樣式。 無論如何,我們都有引導程序,因此我們可以使用基本的Bootstrap Nav rit嗎?

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM