Question

由于某种原因，我无法弄明白，我网站上的bootstrap 3让我感觉很好。屏幕尺寸较小时的切换菜单将无法打开。

网站http://www.gamingonlinux.com，代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-brand" href="http://www.gamingonlinux.com"><img src="/templates/default/images/navbar_logo_light.png" alt="GamingOnLinux" /></a>
      </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="/donate/">Donate</a></li>
            <li><a href="/sales/">Sales</a></li>
            <li><a href="/contact-us/">Submit Tip</a></li>
            <li><a href="/crowdfunding/">Gaming Wiki</a></li>
            <li><a href="/about-us/">About Us</a></li>
            <li><a href="/community/">Community Page</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    {:user_menu}
                </ul>
            </li>
        </ul>
        <form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
            <input type="hidden" name="module" value="search">
            <input type="text" style="padding-right: 5px;" class="form-control search-bar" name="q" placeholder="Search Articles">
            <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
        </form>
    </div>
</nav>

Answer 1

您在另一个样式表style.light.min.css中拥有覆盖样式：

@media (max-width: 985px) {
    .navbar-collapse.collapse {
         display: none!important; 
    }
}

删除它，导航栏将正确切换。

Bootstrap切换菜单未打开

1 个答案: