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

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- &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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">&nbsp; <a class="navbar-brand mr-auto mr-lg-0" href="./index.html">&nbsp; &nbsp; <img src="./images/logo.svg" class="logo" alt="sultry silk logo">&nbsp; </a>&nbsp;&nbsp;&nbsp; <button class="navbar-toggler p-0 border-0" type="button" data-toggle="collapse"&nbsp; data-target="#navbar" aria-expanded="false" aria-controls="navbar">&nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; </button>&nbsp; <div class="navbar-collapse collapse" id="navbar">&nbsp; &nbsp; <ul class="navbar-nav mr-auto">&nbsp; &nbsp; &nbsp; <li class="nav-item active">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="./index.html">Home<span class="sr-only">(current)</span></a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="./Icons.html">Icons</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="./tech.html">Technology</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="./sustain.html">Sustainability</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="./culture.html">Politics & Culture</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <form class="form-inline my-2 my-lg-0">&nbsp; &nbsp; &nbsp; <button class="btn btn-sm btn-outline-secondary my-2 my-sm-0" type="submit">Subscribe</button>&nbsp; &nbsp; </form>&nbsp; </div></nav>

Answer 2

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