如何在移动设备上自动将菜单栏更改为下拉列表？答案

【问题标题】：How to automatic change the menu bar into drop down list when on mobile device?如何在移动设备上自动将菜单栏更改为下拉列表？
【发布时间】：2013-09-09 00:40:25
【问题描述】：

我正在开发桌面和移动网站。我希望菜单栏在桌面网站上显示完整菜单，而在移动网站上仅显示一个带有下拉菜单的按钮。任何人都知道如何做到这一点？使用引导程序可以做到吗？但是怎么做？请帮忙。

就像这个网站..缩放你的浏览器，你会看到菜单按钮。 http://getbootstrap.com/2.3.2/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这很容易通过 bootstrap 实现。

这是直接从引导文档复制而来的。

阅读文档HERE。最值得注意的是“响应式导航栏”部分。

<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>

         <!-- Be sure to leave the brand out there if you want it shown -->
         <a class="brand" href="#">Project name</a>

         <!-- Everything you want hidden at 940px or less, place within here -->
         <div class="nav-collapse collapse">
             <!-- .nav, .navbar-search, .navbar-form, etc -->
             <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
             </ul>
         </div>
      </div>
   </div>
</div>

【讨论】：

您好 Schmalzy，感谢您的回复。但是，如果我不想通过 bootstrap 使用 ui 设计，我也可以做到吗？
@SoKim 如果您愿意，可以使用Customize 页面更改用户界面。或者简单地使用您自己的自定义 CSS 覆盖默认引导 CSS。