Question

我试图以1024宽度添加bootstrap切换导航。我已经为它写了一个媒体查询，但在打开导航后，它突然隐藏起来。

这是我的css：

@media (max-width: 1024px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-header .logo {
    width: 400px !important;
    float: left !important;
  }
  .responsive-logo {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  .navbar-toggle {
    display: block;
  }
  .bs-navbar-collapse.collapse {
    display: none !important;
  }
}

和Html代码：

<div class="container-fluid inverse">
    <div class="navbar-header responsive-logo left">
        <button class="navbar-toggle active" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="logo"><img src="/05/logo2.png" class="img-responsive" alt=""></a>
    </div>
    <div class="col-md-8">
        <nav style="height: auto;" class="navbar-collapse bs-navbar-collapse collapse in" role="navigation" id="site-navigation">
            <div class="col-md-7 col-md-offset-1  pdtp10">
                <ul id="menu-top-menu" class="nav navbar-nav navbar-left responsive-nav main-nav-list">
                    <li id="menu-item-723" class="menu-item "><a href="#">Philosophy</a></li>
                    <li id="menu-item-724" class="menu-item"><a href="#">Team</a></li>
                    <li id="menu-item-539" class="menu-item"><a href="#">Blog</a></li>
                    <li id="menu-item-540" class="menu-item "><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="col-md-4 pdtp20 lpno">
                <div class="loginmenu">
                    <a href="#/"><img src="05/user1.png">Angel Logout</a>
                </div>
            </div>
        </nav>
    </div>
</div>

Answer 1

<强> Check this DEMO

添加 CSS

    @media (max-width: 2000px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

<强> Result

我的引导程序Toggle在打开后消失了

1 个答案: