时间戳

首页 > 解决方案 > Bootstrap 4 - 导航栏切换不起作用。它没有显示任何导航链接

mobile - Bootstrap 4 - 导航栏切换不起作用。它没有显示任何导航链接

问题描述

在移动模式下，切换不起作用。有一些动作，但没有显示任何链接。

这是测试站点： http ://www.scriptux.net/testgf/

还有codepen： https ://codepen.io/boris-k/pen/vYJjqGo

这里还有一小段代码：

<nav class="navbar navbar-expand-md navbar-dark navbar-toggleable-md" id="nav-bg-blue-custom2">
      <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#nav-bg-blue-custom2" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
     <!-- <div class="top-nav-container-custom container-fluid"> -->
     <!--  <div class="container"> -->
  <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
     
     <!-- <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse"> -->
     <!-- <div class="d-flex justify-content-start">    -->
      <ul class="navbar-nav mt-0" id="nav-div-custom">
        <li class="nav-item active li-custom">
        <a class="navbar-brand" href="#">
        <img src="assets/img/gear-focus-logo-photo-and-video-marketplace.png" />
      </a>
    </li>   
  </div>
   
  <div class="mx-auto order-0 input-group rounded">
    <input type="search" class="form-control nav-search-custom" placeholder="Search" aria-label="Search"
    aria-describedby="search-addon" />
    <span class="border-0 search-addon-custom" id="search-addon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-search white-icon-custom" viewBox="0 0 16 16">
      <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
  </svg>
    </span>
  </div>

先感谢您！

标签： mobilebootstrap-4responsive-designtogglenavbar

解决方案

您的头部有 Bootstrap 4 css，底部有 Bootstrap 5 javascript。使用 BS 4 javascript

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

推荐阅读