Question

我已经尝试了很长时间来解决这个问题很长一段时间我已经多次运行我的代码在引导程序文件之前保留了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。和“折叠导航栏崩溃”类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>

Answer 2

按正确顺序订购jquery和bootstrap。检查下面的代码片段它是否正常工作。

＆＃13;

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

＆＃13;

Bootstrap导航栏折叠菜单无法在手机中使用

2 个答案: