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

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 class="navbar-collapse collapse" id="navbar">
                   <ul class="navbar-nav mr-auto">
                     <li class="nav-item active">
                       <a class="nav-link" href="./index.html" class="buttons">Home<span class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="./Icons.html" class="buttons">Icons</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="./tech.html" class="buttons">Technology</a>
                     </li>
                     <li class="nav-item">
                     <a class="nav-link" href="./sustain.html" class="buttons">Sustainability</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="./culture.html" class="buttons">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 1

您的代码 sn-p 存在一些问题。

首先，在您的 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
• 你的数据上有很大的空间-toggle data- 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>

看看W3C Validator;此工具将分析您的网站并提醒您发现的任何 HTML 错误。

Answer 2

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

推荐 1 号。