导航栏折叠不起作用 - 引导程序 4

Question

我对导航栏有一些问题。 当浏览器最小化或从手机打开网站时，该按钮不起作用。 您能否看一下代码并让我知道问题所在？

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #caebf2;">
  <div class="container-fluid">
    <a class="navbar-brand" href="<?php echo base_url(); ?>">HulkGYM</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor03">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo base_url(); ?>">Home
          </a>
        </li>
        
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo base_url(); ?>about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo base_url(); ?>posts">Forum</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo base_url(); ?>categories">Categories</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <?php if(!$this->session->userdata('logged_in')): ?>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/register">Register</a></ll>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/login">Login</a></ll>
          <?php endif; ?>
          <?php if($this->session->userdata('logged_in')): ?>
                      <?php if($this->session->userdata('username') == 'rk'): ?>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/admin">Admin view</a></ll>
          <?php endif; ?>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>dashboard/index">Profile</a></ll>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>posts/create">Create Post</a></ll>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>categories/create">Create Category</a></ll>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/logout">Logout</a></ll>
          <?php endif; ?>

      </ul>
    </div>
  </div>
</nav>

Answer 1

我如何解决这个问题是我添加了

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

在头部标签中。

下一步是我将data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"更改为data-bs-target="#navbarText" aria-controls="navbarText" 。

此外，需要更改第二个 div 类的 id。 从 <div class="collapse navbar-collapse" id="navbarColor03">到<div class="collapse navbar-collapse" id="navbarText"> 。

最后， <li>的结束标记是</l1>而不是</li> 。

最终代码如下所示：

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #caebf2;">
  <div class="container-fluid">
    <a class="navbar-brand" href="<?php echo base_url(); ?>">HulkGYM</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto">
        <li class="nav-item ">
          <a class="nav-link active" href="<?php echo base_url(); ?>">Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo base_url(); ?>posts">Forum</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo base_url(); ?>categories">Categories</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <?php if(!$this->session->userdata('logged_in')): ?>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/register">Register</a></li>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/login">Login</a></li>
          <?php endif; ?>
          <?php if($this->session->userdata('logged_in')): ?>
                      <?php if($this->session->userdata('username') == 'rk'): ?>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/admin">Admin view</a></li>
          <?php endif; ?>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>dashboard/index">Profile</a></li>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>posts/create">Create Post</a></li>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>categories/create">Create Category</a></li>
            <li><a class="nav-link active" href="<?php echo base_url(); ?>users/logout">Logout</a></li>
          <?php endif; ?>

      </ul>
    </div>
  </div>
</nav>