Question

有人可以帮我修复导航栏吗？单击切换器时，它没有正确展开，确定我放错了div，但是我在元素周围移动但收效甚微...

<header class="site-header" role="banner">
  <div class="navbar-wrapper">
    <nav class="navbar navbar-light bg-light navbar-expand-lg ">
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <!-- end button -->
      <a class="navbar-brand" src="index.html"><img class="logo-brand"src="img/kin.jpg" alt="header icon"></a>
    
    <!-- collapsed section -->
      <div class="navbar-collapse collapse" id="navbarToggler">
        <!-- ml-auto for right and mr-auto for left -->
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item"><a class="nav-link"  href="#">Activities</a></li>

        </ul>
      </div>
      
    </nav> <!--navbar -->
  </div><!--navbar wrapper-->
</header>

我已将其与无法正常工作的代码进行了比较……有谁愿意纠正我的错误？我已经在我的代码中复制了一个正在崩溃的导航栏，同样的事情发生了，当文本从其父项中出来时，包装器将不会展开

谢谢

Answer 1

看下面的例子：

您的代码没有问题。确保为库提供正确的链接。我添加了引导CSS和js库链接。并且需要bootstrap js链接之前的Jquery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<header class="site-header" role="banner">
  <div class="navbar-wrapper">
    <nav class="navbar navbar-light bg-light navbar-expand-lg ">
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <!-- end button -->
      <a class="navbar-brand" src="index.html"><img class="logo-brand"src="img/kin.jpg" alt="header icon"></a>
    
    <!-- collapsed section -->
      <div class="navbar-collapse collapse" id="navbarToggler">
        <!-- ml-auto for right and mr-auto for left -->
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link"  href="#">Activities</a></li>
        </ul>
      </div>
      
    </nav> <!--navbar -->
  </div><!--navbar wrapper-->
</header>

Answer 2

`

测试首页

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0" shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

`

此外，不要忘记在HTML文档的开头添加初始样式表导入，因为该样式表将在正确显示页面中发挥关键作用。为设备宽度指定宽度将允许html文档调整为设备宽度，而UTF-8为HTML解释器指定字符编码，这是所有开发人员都应养成的习惯！

Bootstrap导航栏，为什么我的导航栏无法正确扩展

2 个答案: