使用bootstrap 3，你如何拥有一个完全不同的移动导航栏，而不是响应？

I'm building my webapp and I dont like the way my navbar looks when collapses. I'd rather just have a different navbar for mobile users and basically any browser that falls below the width threshold.

我正在构建我的webapp，我不喜欢我的导航栏在崩溃时的样子。我宁愿为移动用户和基本上任何低于宽度阈值的浏览器设置不同的导航栏。

So rather than how bootstrap just turns your navbar into a list, I'd rather make it look nice with clickable icons.

因此，而不是引导程序如何将导航栏变为列表，我宁愿使用可点击的图标使其看起来很漂亮。

What's the best way of going about this? Here's my current navbar.

解决这个问题的最佳方法是什么？这是我当前的导航栏。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="navbar-header">


          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div {{action toggleProperty "showNotifications"}}  id="not-container-mobile" class="navbar-toggle" style="position:relative">
            <i
               class="icon-globe icon-large use-blue"></i>         

               {{#if showNotifications}}
               {{view App.NotificationView}}
               {{/if}}
          </div>
          <a class="navbar-brand " href="#"><img class="logo"
             src="/images/app_dark.png"></a>
      </div>




<div class="navbar-header navbar-right">
      <div class="navbar-collapse collapse" >

        <ul class="nav navbar-nav navbar-right">
      <li>
          <div {{action toggleProperty "showNotifications"}} id="not-container"  style="position:relative">
            <i
               class="icon-globe icon-large use-blue"></i>         

               {{#if showNotifications}}
               {{view App.NotificationView}}
               {{/if}}
          </div>
      </li>
        <li>{{view App.SearchView}}</li>

        <li>
        <div class="navbar-header navbar-right">
              <p class="navbar-text">
              {{#link-to "user" currentUser._id.$oid}}
              {{currentUser.name}}
              {{/link-to}}

              </p>
        </div>
        </li>
        <li>
        <div id="settings-cog" class="navbar-header navbar-right">
           <li  class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">          
                 <i class="icon-cogs icon-large use-blue"></i>
              </a>
              <ul class="dropdown-menu">
                <li><a data-toggle="modal" data-target="#changePassModal" href="#">Change Password</a></li>
                 <li><a {{action "toggleEditView" target="base"}} data-toggle="modal" data-target="#editModal" href="#" href="#">Edit Profile</a></li>
                 <li><a href="/#/logout">Logout</a></li>
              </ul>
           </li>
        </div>
        </li>

        </ul>

        </div>
        </div>



        </div>


</nav>

1 个解决方案

#1

Just create two navbars. On your full-sized navbar add the classes .hidden-sm and .hidden-xs. Then, on your mobile navbar add the classes .visible-xs and .visible-sm. That way, you only see the navbar for the sizes you've designated. For more options, see Responsive utilities.

只需创建两个导航栏。在您的全尺寸导航栏上添加类.hidden-sm和.hidden-xs。然后，在您的移动导航栏上添加类.visible-xs和.visible-sm。这样，您只能看到指定尺寸的导航栏。有关更多选项，请参阅响应实用程序。

1 个解决方案

#1

更多相关文章

随机推荐