如何让导航折叠成移动设备的小图标？答案

【问题标题】：How do I get the navigation to collapse into the small icon for mobile devices?如何让导航折叠成移动设备的小图标？
【发布时间】：2012-02-05 15:26:59
【问题描述】：

如果您继续访问Twitter-Bootstrap 网站并将窗口大小缩小到 1024x768 以下，导航将变为您单击的图标。这是javascript插件之一吗？如何让我的网站做同样的事情？

编辑

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

导航需要nav-collapse 属性以及.btn。这是一个例子：

<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 了解有关折叠导航的更多详细信息。

2012 年 10 月 3 日旁注

我刚开始使用另一个应用程序进行此操作，但在使用最小化文件时遇到了一些问题，因此如果您遇到问题，即使一切设置正确，我也建议您坚持常规操作。这是我现在的application.css：

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

【讨论】：

这个 btn 类到底是做什么的？我没有得到上面的评论。 --编辑-- 没关系。它将出现切换按钮。
@LearningRoR 对我的问题有什么想法吗？ stackoverflow.com/questions/14203279/…
好的，但是如何让它以定义的大小折叠？默认折叠在 970px，但我想让它在 300px 折叠。

【解决方案2】：

它不是 JavaScript（除了实现可切换菜单本身），它是带有媒体查询的 CSS：

http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

【讨论】：

我已经在我的应用程序中包含了引导响应，但仍然无法弄清楚如何启用它。主网站上的说明只是说要包含我所做的 css 文件，但没有任何更改。
@wrbg：你读过the docs吗？此外，CSS 文件并没有做任何神奇的事情 - 如果您只需要一个折叠菜单，只需使用相同的媒体查询自己做。
我相信是的。我在twitter.github.com/bootstrap/scaffolding.html 阅读了有关响应式设计的特定部分。其他一切都会崩溃，但导航不会。我在编辑中添加了一张图片以显示错误。
你需要 jQuery 并且它必须在 boostrap.js 文件之前加载。

【解决方案3】：

如果您只是通过单击按钮下载了引导文件，则在您自定义页面时它不会立即工作。您必须下载最新的 jQuery 文件并将其替换为他们提供给您的通用文件路径。您还可以像这样清理示例文件...

<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

进入

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jqueryNEW.js"></script>
<script src="../assets/js/bootstrap.js"></script>

或者直接点击“带文档下载”的链接你所有的问题都会得到解决，因为所有的链接都会起作用

【讨论】：

【解决方案4】：

嗯..@LearningROR

I have nodified your code..

 <div class="navbar">  
<div class="navbar-inner">
<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>
</div>
</div>

【讨论】：