时间戳

首页 > 解决方案 > Bootstrap V5 data-bs-toggle 只显示崩溃，不隐藏它，还有其他选择吗？

html - Bootstrap V5 data-bs-toggle 只显示崩溃，不隐藏它，还有其他选择吗？

问题描述

如标题所述，由于较新版本的bootstrap中data-bs-toggle的一些内部问题，它只会崩溃并且之后不会隐藏它，并且在阅读了有关此问题的类似帖子后https://github.com /twbs/bootstrap/issues/32643他们在哪里解决了这个问题，同时他们没有包含任何替代方案，而且由于我是 Web 开发的初学者，我不确定执行相同功能的最佳方法是什么？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
    <div class="container">
      <a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>


      <!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="mx-auto"></div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/cv">CV</a>
          </li>
          <li class="nav-item me-4">
            <a class="nav-link text-white" href="/contact">Contact</a>
          </li>

标签： htmlcsstwitter-bootstrap

解决方案

这里你的问题是文本颜色为白色 在引导程序中有一个类bg-dark将其提供给导航将更改背景颜色，以便您可以看到文本...

你提到的问题是模式崩溃，而不是导航栏

这是更新的代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark p-md-3">
    <div class="container">
      <a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>


      <!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="mx-auto"></div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/cv">CV</a>
          </li>
          <li class="nav-item me-4">
            <a class="nav-link text-white" href="/contact">Contact</a>
          </li>

推荐阅读