html - Bootstrap 导航栏折叠菜单在手机中不起作用

Question

我已经尝试了很长时间来解决这个问题，我已经多次运行我的代码，在 Bootstrap 文件之前保留了 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>

Answer 1

对于数据目标，使用 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>