问题
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
andid
. 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