Bootstrap 3 导航栏在移动设备上不工作

Question

我的 Bootstrap 导航栏无法在移动设备 phone 视图中使用（当它无法显示链接时）。我不能点击按钮。在对 Internet 和 Whosebug 进行了大量研究之后，我尝试了该解决方案，但没有一个有效。这些是我尝试过的解决方案；

验证 data-target 和 id。 As here 检查
添加<meta name="viewport" content="width=device-width, initial-scale=1.0">Here勾选
添加 CSS .dropdown-backdrop { position: static; } 在堆栈的某处

这是我的导航栏代码；

<nav id="layout-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
                            <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="index.php">7 Frères</a>
                    </div>
                    <div class="collapse navbar-collapse navbar-ex1-collapse" id="navigationbar">
                        <ul class="nav navbar-nav">

                            {% for item in staticMenu.menuItems %}
                                    <li class="{% if item.isActive %}active{% endif %}"><a href="{{ item.url }}">{{ item.title }}</a></li>
                            {% endfor %}
                        </li>
                        </ul>
                    </div>
                </div>
            </nav>

谢谢！

Answer 1

问题是您没有在页面上包含 Bootstrap Javascript（使用内置下拉菜单所必需的）。一旦你包含了它，它应该可以工作：

<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap 3 导航栏在移动设备上不工作

Bootstrap 3 Navbar not working on mobile

html

css

navbar

twitter-bootstrap