Question

试图找出我之前如何折叠菜单？在bootstrap 3中有没有简单的方法呢？

我的代码atm的问题是它打开了，并自动关闭？真的不明白为什么会这样。

@media (max-width: 970px) {
    .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;
    }
}

HTML：

<div class="top_menu_wrap">
  <div class="navbar-header navbar-right">
    <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>
  </div>
  <div class="collapse navbar-collapse navbar-right">
    <ul id="menu-menu-1" class="nav navbar-nav">
      <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4 active"><a title="Forsiden" href="http://localhost/wpdev/">Forsiden</a></li>
      <li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-75 dropdown">
        <a title="Om Oss" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Om Oss <span class="caret"></span></a>
        <ul role="menu" class=" dropdown-menu">
          <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a title="Om Oss" href="http://localhost/wpdev/om-oss/">Om Oss</a></li>
          <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a title="Vår trening" href="http://localhost/wpdev/var-trening/">Vår trening</a></li>
          <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a title="Våre ansatte" href="http://localhost/wpdev/vare-ansatte-2/">Våre ansatte</a></li>
          <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Priser" href="http://localhost/wpdev/priser/">Priser</a></li>
        </ul>
      </li>
      <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a title="Timeplan" href="http://localhost/wpdev/timeplan/">Timeplan</a></li>
      <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a title="Timebeskrivelse" href="http://localhost/wpdev/timebeskrivelse/">Timebeskrivelse</a></li>
      <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="Bli medlem" href="http://localhost/wpdev/bli-medlem/">Bli medlem</a></li>
    </ul>
  </div>
</div>

Answer 1

如果我理解你的问题，你只需要调整你的媒体查询。将max-width设置为例如如果您的视图大于500px，则500px将折叠您的菜单...

希望这会有所帮助......

bootstrap 3 - 之前的折叠菜单

1 个答案: