如何让导航折叠为移动设备的小图标? [英] How do I get the navigation to collapse into the small icon for mobile devices?

问题描述

如果您访问 有关折叠导航的更多详细信息.

旁注，2012 年 10 月 3 日

我刚开始用另一个应用程序做这个，在使用最小化的文件时遇到了一些问题，所以我建议你坚持常规，如果你有问题，即使一切都设置正确.这是我的 application.css 现在:

/**= require_self*= 需要引导程序*= 需要引导响应*= require_tree .*/身体 {填充顶部:60px；# 这是用于固定顶部导航}

If you go on Twitter-Bootstrap website and reduce the window size below 1024x768, the navigation will change into an icon that you click for it. Is this one of the javascript plugins? How do I get my website to do the same thing?

---

EDIT

解决方案

The navigation requires the nav-collapse property along with the .btn as well. This is an example:

<div class="container">
  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>

    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><

</div>

http://twitter.github.com/bootstrap/components.html#navbar for more details about collapsing the navigation.

SIDE NOTE Oct 3, 2012

I just started to make this with another application and ran into some trouble using the minimized files so I suggest you stick to the regular if your having issues even when everything is setup correctly. Here is my application.css now:

/*
 *= require_self
 *= require bootstrap
 *= require bootstrap-responsive
 *= require_tree .
 */
body { 
    padding-top: 60px; # this is for fixed-top navigation
}

这篇关于如何让导航折叠为移动设备的小图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！