[英]Bootstrap navbar collapse menu not working in mobiles
我已經嘗試了很長時間來解決此問題很長時間了,我多次遍歷我的代碼,在引導文件之前保留了jquery文件,但它們仍然不起作用!
(我是編程新手,所以如果這是一個愚蠢的錯誤,請原諒,謝謝!)
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="<?php echo base_url(); ?>">love</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="<?php echo base_url(); ?>">Home</a>
</li>
<li><a href="<?php echo base_url(); ?>about">About</a>
</li>
<li><a href="<?php echo base_url(); ?>contact">Contact</a>
</li>
<li><a href="<?php echo base_url(); ?>blog">Help</a>
</li>
<li><a href="<?php echo base_url(); ?>blog">Other</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
對於數據目標,請使用ID。 和“ collapse navbar-collapse”類div上的相同ID。
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo base_url(); ?>">love</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="<?php echo base_url(); ?>">Home</a>
</li>
<li><a href="<?php echo base_url(); ?>about">About</a>
</li>
<li><a href="<?php echo base_url(); ?>contact">Contact</a>
</li>
<li><a href="<?php echo base_url(); ?>blog">Help</a>
</li>
<li><a href="<?php echo base_url(); ?>blog">Other</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
以正確的順序訂購您的jquery
和bootstrap
。 檢查以下代碼段,它可以正常工作。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <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="<?php echo base_url(); ?>">love</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="<?php echo base_url(); ?>">Home</a> </li> <li><a href="<?php echo base_url(); ?>about">About</a> </li> <li><a href="<?php echo base_url(); ?>contact">Contact</a> </li> <li><a href="<?php echo base_url(); ?>blog">Help</a> </li> <li><a href="<?php echo base_url(); ?>blog">Other</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.