Bootstrap 3 Navbar not working on mobile

寵の児 提交于 2021-02-08 10:22:06

问题


My Bootstrap Navbar isn't working on mobile phone view (when it can't display the links). I can't click the button. After many research on Internet and StackOverflow, I tried out the solution and no one works. These are the solutions that I tried;

  • Verify the data-target and id. As here Check
  • Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> Here Check
  • Add CSS .dropdown-backdrop { position: static; } On Stack, somewhere

Here is my navbar code;

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

Thanks!


回答1:


The issue is that you are not including the Bootstrap Javascript(necessary for using the built-in dropdown menu) on your page. Once you have included that, it should work:

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


来源:https://stackoverflow.com/questions/30898781/bootstrap-3-navbar-not-working-on-mobile

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!