调整浏览器大小时，引导导航栏不起作用

Question

我正在尝试创建一个可折叠的 Bootstrap 导航栏。当我调整浏览器大小时，切换不会出现。我尝试将代码更改为我在其他论坛上看到的代码，例如对我的徽标和按钮进行分组，但这会弄乱布局。我将不胜感激任何帮助，谢谢！@media (max-width: 991.98px) {    .collapse {      position: fixed;      top: 56px; /* Height of navbar */      bottom: 0;      left: 100%;      width: 100%;      padding-right: 1rem;      padding-left: 1rem;      overflow-y: auto;      visibility: hidden;      background-color: #343a40;      transition: visibility .3s ease-in, -webkit-transform .3s ease-in-out;      transition: transform .3s ease-in, visibility .3s ease-in-out;      transition: transform .3s ease-in, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;    }    .collapse.open {      visibility: visible;      -webkit-transform: translateX(-100%);      transform: translateX(-100%)    }  }<div class=".container-fluid">        <nav role="navigation" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">                <a class="navbar-brand mr-auto mr-lg-0" href="./index.html">                    <img src="./images/logo.svg" class="logo" alt="sultry silk logo">                </a>               <button class="navbar-toggle collapse p-0 border-0" type="button" data-           toggle="collapse"  data-target="#navbar" aria-expanded="false" aria-controls="navbar">                        <span class="navbar-toggler-icon"></span>                </button>                           </div></nav>```

Answer 1

您的代码片段有一些问题。

首先，在你的nav-link类上，你使用了两个类声明：

<a class="nav-link" href="./culture.html" class="buttons">Politics & Culture</a>

这将导致 HTML 错误，并且可能会影响您在 CSS 中的样式；只需将您的buttons班级放在旁边即可解决此问题nav-link

<a class="nav-link buttons" href="./culture.html">Politics & Culture</a>

---

接下来，您的button标签 HTML 将导致 Bootstrap 错误。

• 您的使用类navbar-toggle，将其更改为navbar-toggler

• 你的数据上有很大的空间-toggledata-           toggle="collapse"关闭它。

• collapse已经是一个引导类；这需要删除。

---

工作示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav role="navigation" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">

  <a class="navbar-brand mr-auto mr-lg-0" href="./index.html">

    <img src="./images/logo.svg" class="logo" alt="sultry silk logo">

  </a>

  

  <button class="navbar-toggler p-0 border-0" type="button" data-toggle="collapse"  data-target="#navbar" aria-expanded="false" aria-controls="navbar">

    <span class="navbar-toggler-icon"></span>

  </button>

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

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

      <li class="nav-item active">

        <a class="nav-link" href="./index.html">Home<span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="./Icons.html">Icons</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="./tech.html">Technology</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="./sustain.html">Sustainability</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="./culture.html">Politics & Culture</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <button class="btn btn-sm btn-outline-secondary my-2 my-sm-0" type="submit">Subscribe</button>

    </form>

  </div>

</nav>

Answer 2

.collapse 是一个引导类。如果您指定的属性之一与 Bootstrap 在 .collaps 类中定义的属性相冲突，则可能会导致错误。1. 尝试定义您自己的折叠类并以不同的方式命名，或者 2. 使用 !important 覆盖 Bootstrap 值。