Bootstrap 3导航栏没有响应答案

【问题标题】：Bootstrap 3 Navbar Not ResponsiveBootstrap 3导航栏没有响应
【发布时间】：2015-07-03 20:27:43
【问题描述】：

我一直在各种设备上测试我的引导站点，以确保它具有响应性。除了导航栏之外，我已经为不同的显示尺寸正确调整了所有内容。在我的浏览器上，当我水平调整窗口大小时，它似乎会响应，按预期折叠菜单，但在移动设备上，我仍然看到导航栏，就好像它在台式机或笔记本电脑的全屏窗口中显示一样。这是我的导航栏的代码：

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="WinShir" src="img/rocket.png" /> WinShir
        </a>
        <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>
          <span class="sr-only">Toggle Navigation</span>
        </button>
      </div>

      <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
        <li><a href="#signInModal" data-toggle="modal">Sign In</a></li>
        <li><a href="#signupModal" data-toggle="modal">Sign Up</a></li>
      </ul>
    </div>

  </nav>
</div>

我尝试将 nav 元素更改为 div 以查看是否有帮助但没有成功。我还删除了封闭的容器类 div，看看这是否有帮助。

【问题讨论】：

您网站的其他部分是否响应，只是导航栏不响应？它是在移动设备上放大还是看起来像缩小的小型桌面版本？
是的，其他一切都正确响应，只是导航栏没有。我在帖子中提到过，但似乎有些混乱。在我的笔记本电脑上，当我调整窗口大小时它会响应。有或没有下面提到的容器 div。在我的手机（这是 android、chrome 浏览器）上，除了导航栏外，一切都会响应。同样，有或没有容器 div。

标签： html twitter-bootstrap responsive-design nav responsiveness

【解决方案1】：

你可能没有set your viewport。把它放在<head> 中，看看有没有什么不同。

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

这就是问题所在。谢谢！