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

Question

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

Fiddle: https://jsfiddle.net/mmsyed/z8vg749t/6/#&togetherjs=MJCCM4wefa

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

移除第二个“”后有效，

看看 fiddle...

<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

多处出错，它们是：

您没有在 <button class="navbar-toggler" >... </button>

data-target

<div class="collapse navbar-collapse" id=""> 需要一个与 data-target 相同的 ID（从上面的第 1 点开始）
您在代码中使用 class disabled 禁用了下拉菜单：<a class="nav-link dropdown-toggle disabled">... </a>
不包括bootstrap.min.js
没有关闭 Font Awesome
incorrect/incomplete 多个元素的引号检查 nav-item LinkedIn 和 Twitter

以下 snippet 适用于这些特定修复：

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

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

Navbar Links not appearing when resizing screen

html

nav

navbar

bootstrap-4