【问题标题】:When I open website on mobile bootstrap navbar is not collapse当我在移动引导程序导航栏上打开网站时不会崩溃
【发布时间】:2016-01-19 08:20:58
【问题描述】:

这种情况很奇怪。当我在小屏幕上打开我的网站(建立在引导程序上)时,导航栏是可见的,但它应该是折叠的。当我单击按钮折叠时,它仍然可见,当我第二次单击时,它刚刚折叠。并且因为它运作良好。但是当我重新加载页面时,我仍然有这个问题。

       <div class=container>                       
      <!--MENU-->
<nav  style="border-bottom:1px solid #000;">
            <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed menu_button" data-toggle="collapse" data-target=".nbar" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
      <div class="container nbar">
        <ul class="nav nav-justified">
          <li><a href=#>o nas</a></li>
          <li><a href=#>galeria</a></li>
          <li><a href=#>blog</a></li>
          <li><a href=#>kontakt</a></li>
        </ul>
      </div>
</nav>

【问题讨论】:

    标签: javascript jquery html twitter-bootstrap jquery-mobile-navbar


    【解决方案1】:

    collapse in 类添加到您的nav 元素中。这样它在移动设备上仍然可见,但按钮将按预期工作。如果您仅将collapse 应用为类并将aria-expanded 设置为false,它将在移动设备上不可见(但很可能在普通视图中也不可见)。

    <div class="container nbar collapse in" aria-expanded="true">
         <ul class="nav nav-justified">
             <!-- li's here -->  
         </ul>
    </div>
    

    【讨论】:

    猜你喜欢
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多