Question

出于某种原因，我的导航栏切换在768px处消失。我不完全确定问题是什么，但我认为它与我的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%;
    }


}

不完全确定问题是什么，我读到它可能是bootstrap本身的问题。这是我的jsfid https://jsfiddle.net/marvstah/tLzorkdg/1/

重要的是，它适用于所有尺寸减去768而不是768

Answer 1

将media-query最大宽度更改为767px。

由于您使用的是bootstrap。 Botstrap.css在767px上有一些媒体查询。它覆盖你的。

以下是工作 Demo

＆＃13;

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

＆＃13;

Answer 2

很好奇，它为您解决了吗？我遇到同样的问题，但分辨率为767px。我的视口在767像素和768像素上可以正常工作，但是在767像素上却无法正常工作。但据我观察，最大宽度：767像素不包括767像素。但在最小宽度/最大宽度上：768px都包括768px！我正在拉头发...

Answer 3

我们不需要使用所有样式。无论如何我们都有bootstrap，所以我们可以使用一个基本的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>

navbar-toggle消失在768px

3 个答案: