Question

我试图创建一个导航栏，该导航栏隐藏链接并在小于“ md”大小的屏幕时显示“ fas fa-bars fa-1x”图标（3个水平条）。当屏幕变小时，该按钮出现，但单击该按钮后将不起作用。

提琴： https://jsfiddle.net/mmsyed/z8vg749t/6/#&togetherjs=MJCCM4wefa

我已删除所有自定义CSS和JS 看了Bootstrap 4参考页

在删除第二个“”时有效，

看看小提琴...

<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--jQuery  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous"
</head>
<body>
<nav class="mb-1 navbar navbar-expand-md">

<a class="navbar-brand" href="#">
  <img src="images/logo.png" width="70" height="40" class="d-inline-block align-top" alt=""> Navbar  </a>

<button class="navbar-toggler" type="button" data-toggle="collapse">
<span class=""><i class="fas fa-bars fa-1x"></i></span>
</button>

<!-- Collapsable Content -->

<div class="collapse navbar-collapse" id="">

  <!-- Left Side -->

<ul class="navbar-nav mr-auto">

  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle disabled" id="" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">Pages
    </a>
    <div class="dropdown-menu"> 
      <a class="dropdown-item" href="#">Page 1</a>
      <a class="dropdown-item" href="#">Page 2</a>
      <a class="dropdown-item" href="#">Page 3</a>
    </div>
  </li>
</ul>
<!-- Right Side -->


<ul class="navbar-nav ml-auto nav-flex-icons">
  <!-- Left Side Links and Icons -->
  <li class="nav-item">
    <a class="nav-link" id="toggler">
      <i class="fab fa-rebel"></i>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="#" target="_blank">
      <i class="fab fa-github-square"></i>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href=#" target="_blank">
      <i class="fab fa-linkedin"></i>
    </a>

  </li>

  <li class="nav-item">
    <a class="nav-link" href="#" target="_blank">
      <i class="fab fa-stack-overflow"></i>
   </a>
</li>

<li class="nav-item">
    <a class="nav-link" href="#" target="_blank"><i class="fab fa-facebook-square"></i></a>
</li>

<li class="nav-item">
    <a class="nav-link" href="#" target="_blank"><i class="fab fa-instagram"></i></a>
</li>

<li class="nav-item">
    <a class="nav-link" href=#" target="_blank"><i class="fab fa-twitter"></i></a>
</li>

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

Answer 1

多处出错，它们是：

您没有在data-target中指定<button class="navbar-toggler" >... </button>
<div class="collapse navbar-collapse" id="">需要一个与data-target（从上面的第1点开始）相同的ID。
您已在代码disabled中使用类<a class="nav-link dropdown-toggle disabled">... </a>禁用了下拉菜单
未包含bootstrap.min.js
没有关闭Font Awesome的脚本标签
LinkedIn和Twitter上多个元素的引号不正确/不完整请检查nav-item

下面的代码段可以使用以下特定修复程序：

<link rel="stylesheet" type="text/css" href="MustaphaSyedDM.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--jQuery  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous" />

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Navbar -->
<nav class="mb-1 navbar navbar-expand-md">

  <a class="navbar-brand" href="#">
    <img src="images/logo.png" width="70" height="40" class="d-inline-block align-top" alt=""> Navbar
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> 
            <span class=""><i class="fas fa-bars fa-1x"></i></span>
        </button>

  <!-- Collapsable Content -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">

    <!-- Left Side -->
    <ul class="navbar-nav mr-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Example</a>
          <a class="dropdown-item" href="#">Example</a>
          <a class="dropdown-item" href="#">Example</a>
        </div>
      </li>
    </ul>

    <!-- Right Side -->
    <ul class="navbar-nav ml-auto nav-flex-icons">

      <!-- Left Side Links and Icons -->
      <li class="nav-item">
        <a class="nav-link" id="toggler">
          <i class="far fa-address-card"></i> </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank">
          <i class="fab fa-github-square"></i>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank">
          <i class="fab fa-linkedin"></i>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank">
          <i class="fab fa-stack-overflow"></i>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank"><i class="fab fa-facebook-square"></i></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank"><i class="fab fa-instagram"></i></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#" target="_blank"><i class="fab fa-twitter"></i></a>
      </li>

    </ul>

  </div>
</nav>

调整屏幕大小时不显示导航栏链接

1 个答案: