簡體   English   中英

Bootstrap導航欄折疊菜單在手機中不起作用

[英]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>

以正確的順序訂購您的jquerybootstrap 檢查以下代碼段,它可以正常工作。

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM