logo标签列表

Bootstrap 3导航栏不具有响应式特性。

htmltwitter-bootstrapresponsive-designnavresponsiveness
7

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

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

我尝试将导航元素更改为div以查看是否有帮助，但没有成功。我还删除了包含容器类div，以查看是否有帮助，但也没有运气。

你的网站其余部分有响应吗，只是导航栏没有响应？ 在移动设备上是否缩放或者看起来像一个微小的、缩小的桌面版本？ - ThisClark
是的，除了导航栏之外，一切都正常响应。我在帖子中提到过，但似乎有些混淆。在我的笔记本电脑上，当我调整窗口大小时，它会响应。无论是否有下面提到的容器DIV。但在我的手机上（这是安卓，Chrome浏览器），除了导航栏之外，一切都正常响应。同样，无论是否有容器DIV。 - John Halbert
2个回答
24

你可能没有设置视口。在<head>标签中添加此代码并查看是否有所不同。

<meta name="viewport" content="width=device-width, initial-scale=1">
这就是问题所在。谢谢！ - John Halbert
1
你帮我省去了很多尝试解决这个问题的压力，哈哈，谢谢你！ - Joshua
0

我在我的一个React项目中遇到了同样的问题。

即使添加了<meta>标签，菜单仍然不具有响应性。

但是你可以通过为汉堡菜单按钮提供自定义的onClick监听器来解决这个问题。 在移动设备上使用以下代码扩展菜单的<button>-

<button className="navbar-toggler" onClick={()=>{document.body.style.zoom=0.8;}} type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"/>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接