首页 文章

Bootstrap / JQuery移动导航无法正常工作

提问于
浏览 次
-2

我似乎遇到使用bootstrap和JQuery的导航栏问题 - 在实际的移动设备和chrome的设备模拟工具中，以下导航栏仍显示为桌面导航栏（没有移动切换按钮，只显示在任何普通计算机上）：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false" aria-controls="navbar">
                    <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="#">Brand</a>
            </div>

            <div class="collapse navbar-collapse" id="navigationbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home <span class="sr-only">(Current)</span></a></li>
                    <li><a href="about.php">About Me</a></li>
                    <li><a href="contact.php">Contact Me</a></li>
                    <li><a href="portfolio.php">Portfolio</a></li>
                </ul>

            </div>
        </div>
    </nav>

抱歉，如果这是一件非常简单的事情，并提前感谢您的帮助 .

jquery html css twitter-bootstrap

2 回答

  • 0

    我想你错过了最重要的 meta Value ：

    <meta name="viewport" content="width=device-width, initial-scale=1">
    回复于
  • 0

    Bootstrap文档：

    <button type="button" class="navbar-toggle **collapsed**" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

    你的代码：

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false" aria-controls="navbar">

    你错过了 . 在你的按钮中坍塌了 .

    回复于

相关问题