Question

我开始使用Bootstrap及其导航栏。

我正在努力让它的响应式菜单工作，但它没有按预期工作。小窗口中的菜单加载扩展，菜单切换不起作用。我已经加载了所有必要的依赖项，但仍然不太正确。

HTML：

        <!-- Static navbar -->
           <div class="navbar navbar-inverse navbar-static-top" role="navigation">
             <div class="container">
               <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand" href="#">Project name</a>
               </div>
               <div class="navbar-collapse collapse">
                 <ul class="nav navbar-nav navbar-right">
                   <li><a href="../navbar/">Default</a></li>
                   <li class="active"><a href="./">Static top</a></li>
                   <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                 </ul>
               </div><!--/.nav-collapse -->
             </div>

Answer 1

Ypu在导航栏上缺少折叠类

此列表：

            <ul class="nav navbar-nav navbar-right">
               <li><a href="../navbar/">Default</a></li>
               <li class="active"><a href="./">Static top</a></li>
               <li><a href="../navbar-fixed-top/">Fixed top</a></li>
             </ul>

需要包含在：

      <div class="navbar-collapse collapse">

你提供的小提琴也有不正确的JS和CSS包括。看看这个例子： http://jsfiddle.net/rbd8758f/

Answer 2

您是否在标题中添加了元标记，这对我有用。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">.

Bootstrap导航栏没有折叠

2 个答案: