html - Bootstrap 导航不会在模拟/真实设备上折叠

标签 html css twitter-bootstrap

有问题的网站: http://marcmurray.net/test_sites/cans/

当我调整浏览器窗口大小时,我的 bootstrap 响应式导航栏崩溃了,但在移动设备和 chrome 模拟设备上,导航栏只是缩小了。 我的导航 HTML 如下:

<nav 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="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="index.php" class="activepage">Home</a></li>
                <li><a href="why.php">Why Us?</a></li>
                <li><a href="process.php">Process</a></li>
                <li><a href="news.php">News</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

谁能看出我哪里出错了?

最佳答案

你不见了

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

在你的 <head> 之间标签。您在任何网站上都需要它来响应。

关于html - Bootstrap 导航不会在模拟/真实设备上折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34316855/

相关文章:

html - 如何做文本溢出 : ellipsis in reverse?

javascript - 为什么我的复制粘贴 Bootstrap 灯箱不起作用?

javascript - 使用 onclick 将内容替换为另一个内容

html - Bootstrap span, row, column 元素需要对齐

html - 平板电脑上的背景图像无法调整(横向 View )

php - 带有 float 文本和不对称边的自定义菜单

javascript - Bootstrap 可切换标签图像

html - FFmpeg + JWplayer + Mp4 失败

css - Elementor 更改按钮悬停在列上的部分图像

javascript - HTML : to display hexagon progressbar with hoverable sides