navbar-toggle 在 768px 处消失

Question

由于某种原因，我的导航栏切换在 768 像素处消失。我不完全确定问题出在哪里，但我认为这与我的 CSS 和媒体查询有关。我将在 768 像素处发布我的导航条码和我的查询的 css（我的媒体查询就像这个 @media 屏幕和（最大宽度：768 像素）所以它应该包括 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

将您的 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%;
    }


}

Answer 2

只是好奇，有没有为你解决过？我遇到了同样的问题，但在 767px 上。我的视口在 767px 和 768px 上工作得很好，但在 767px 上就坏了。 然而，据我观察，max-width: 767px 不包括 767px。但在 min-width / max-width: 768px 都包括 768px！我在扯头发……

Answer 3

我们不需要使用所有的样式。无论如何，我们有引导程序，所以我们可以使用基本的引导程序导航？

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