Bootstrap 5 中的两列折叠导航栏不起作用

Question

我正在制作这个 Bootstrap 5 导航栏，它应该在 md 断点处折叠。折叠后，它应该在两列中显示导航链接。当我到达断点时，我的导航栏被展开并且切换按钮不起作用。当我关闭导航栏的 display: flex 属性时，它会发生变化 - 折叠功能有效，但我的 ul（我将 li 分组）在一列中。我怎样才能在这里达到我的目标 - 具有六个元素的导航栏在 md 断点处折叠并将链接分成两列？

<nav class="navbar navbar-expand-md navbar-light sticky-top w-100">
<div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNavbar">
        <ul class="navUl navbar-nav">
            <li class="nav-item">
                <a class="nav-link text-nowrap" aria-current="page" href="/aboutMe">o mnie</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                    data-bs-toggle="dropdown" aria-expanded="false">portfolio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-nowrap" href="/beforePS">przed sesją</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link navbar-brand" href="/">
                    <img src="/images/logoKP-trans.png" class="img-fluid" alt="Karolina_photography_logo" id="logo">
                </a>
            </li>
        </ul>
        <ul class="navUl navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/voucher">vouchery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/pricing">pakiety</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contact">kontakt</a>
            </li>
        </ul>
    </div>

css（很乱，有待优化）：

  body {
  background-color: #f8edeb;
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  opacity: 0;
  animation: fadeIn 0.5s;
  transition: opacity 0.5s;
}

main {
  align-items: center;
  margin: 3% 20%;
  max-width: 80%;
}

.navbar,
.footer {
  background-color: #fae1dd;
  color: rgba(0, 0, 0, 0.5);
  box-shadow: 10px 5px 5px rgba(202, 178, 174, 0.5);
  padding-top: 0;
  text-align: center;
}

#mainNavbar {
  display: flex;
  justify-content: center;
  align-items:flex-end;
}

.navbar-brand {
  margin: 0;
}

.nav-item {
  display: flex;
  margin: 0 0.8em;
  font-size: 1.2rem;

}

.navUl {
padding-bottom: 10px;
}


.navbar-brand {
  max-width: 300px;
  height: auto;
  padding-bottom: 0;
  top: 0.4rem;
}

#mainNavbar a:hover,
#socialIcons a:hover,
.loginButton a:hover {
  color: white;
  text-shadow: 5px 5px 10px white;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.dropdown-menu {
  border-radius: 0.5rem;
  background-color: rgba(250, 225, 221, 0.9);
}

.dropdown-item:hover {
  background-color: transparent;
}

#socialIcons {
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 10px;
  right: 10px;
}

#socialIcons a,
#kidsPshoot {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5);
  display: inline;
  margin-right: 0.5rem;
}

.fade_rule {
  height: 1px;
  background-color: #e6e6e6;
  width: 50%;
  margin: 0 auto;
  background-image: linear-gradient(left, white 2%, #e6e6e6 50%, white 98%);
  background-image: -o-linear-gradient(left, white 2%, #e6e6e6 50%, white 98%);
  background-image: -moz-linear-gradient(
    left,
    white 2%,
    #e6e6e6 50%,
    white 98%
  );
  background-image: -webkit-linear-gradient(
    left,
    white 2%,
    #e6e6e6 50%,
    white 98%
  );
  background-image: -ms-linear-gradient(left, white 2%, #e6e6e6 50%, white 98%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right bottom,
    color-stop(0.02, white),
    color-stop(0.5, rgb(250, 182, 170)),
    color-stop(0.98, white)
  );
}
@media (max-width:1200px) {
  .nav-item, .dropdown-item, #aboutMeText, p, li, h5 {
      font-size: 1rem;
}
#logo {
  max-width: 230px;
}

.navUl {
  padding-bottom: 5px;
}

}

@media (max-width:992px) {
  #logo {
    max-width: 200px;
    /* position: absolute;
    left: 70%;
    top: 30%; */
  }

  .nav-item, .dropdown-item {
    font-size: 0.9rem;
  }

  .nav-item {
    margin: 0;
  }

}

@media (max-width:768px) {
  .nav-item, .dropdown-item, #navbarDropdownMenuLink, p, li {
      font-size: 0.7rem;
      margin-left: 0;
      text-align: left;
      min-width: 100px;
}

#mainNav {
  position:unset;
}
}

Answer 1

不清楚你所有的 CSS 是干什么用的。有些，例如将 body 上的不透明度设置为 0 会隐藏所有内容。最好有一个包含您的问题的运行片段。

如果您希望徽标位于中央，可以将菜单分成两个无序列表。
要在 navbar-nav 的底部应用边距，请使用 Bootstrap spacing utility classes (mb-1 mb-md-2).
复制 Bootstrap 媒体查询逻辑（min-width，而不是 max-width – 很难用两种方法进行故障排除）并从最小尺寸开始应用媒体查询（无媒体查询），然后增加媒体查询大小（min-width：576px，min-width：768px，等等）。
与其在较小的屏幕上使用较小的文本，不如保持文本大小相同并在文本不适合时调整位置（对于某些用户而言较小的文本更难阅读）。

在折叠版本中为链接设置两列的一种方法是添加一个间隔符 div (.break)，它可以强制 navbar-collapse divs到下一行，然后将它们的宽度设置为 50%。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<style>
    body {
        background-color: #f8edeb;
        font-family: "Quicksand", sans-serif;
    }

    .navbar,
    .footer {
        background-color: #fae1dd;
        color: rgba(0, 0, 0, 0.5);
        box-shadow: 10px 5px 5px rgba(202, 178, 174, 0.5);
        padding-top: 0;
    }

    .navbar-brand {
        margin: 0;
        max-width: 300px;
        height: auto;
        padding-bottom: 0;
        top: 0.4rem;
    }

    #mainNavbar a:hover,
    #socialIcons a:hover,
    .loginButton a:hover {
        color: white;
        text-shadow: 5px 5px 10px white;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }

    .dropdown-menu {
        border-radius: 0.5rem;
        background-color: rgba(250, 225, 221, 0.9);
        max-width: 75%;
    }

    .dropdown-item:hover {
        background-color: #E0C9C5;
    }

    #logo {
        max-width: 120px;
        height: auto;
    }

    @media (min-width: 576px) {
        #logo {
            max-width: 160px;
        }
    }

    @media (min-width: 768px) {
        #logo {
            max-width: 200px;
        }

        .navbar-collapse.flex-basis-md-0 {
            flex-basis: 0;
        }
    }

    @media (min-width: 992px) {
        #logo {
            max-width: 230px;
        }
    }

    @media (min-width: 1200px) {
        #logo {
            max-width: 300px;
        }
    }

    .navbar-collapse {
        max-width: 50%;
    }

    /* Inserting div.break between two flex items will make 
    * the flex item that comes after it break to a new row -
    * this is how the two-column navbar-collapse are moved to
    * a separate row. */
    .break {
        flex-basis: 100%;
        height: 0;
    }

    @media (min-width: 768px) {
        .break {
            display: none;
        }
    }
</style>

<nav class="navbar navbar-expand-md navbar-light sticky-top w-100">
    <div class="container-fluid justify-content-md-around">
        <a class="navbar-brand order-md-1" href="#">
            <img id="logo" src="https://via.placeholder.com/120x40.png/E5FFFF/?text=KP-Trans" alt="" width="300" height="60">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".mainNavbar" aria-controls="mainNavbar1 mainNavbar2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="break"></div>
        <div class="collapse navbar-collapse flex-basis-md-0 mainNavbar" id="mainNavbar1">
            <ul class="navbar-nav mx-md-auto">
                <li class="nav-item">
                    <a class="nav-link text-nowrap" aria-current="page" href="/aboutMe">o mnie</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        portfolio
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">portfolio #1</a></li>
                        <li><a class="dropdown-item" href="#">portfolio #2</a></li>
                        <li><a class="dropdown-item" href="#">portfolio #3</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-nowrap" href="/beforePS">przed sesją</a>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse flex-basis-md-0 align-self-start align-self-md-center mainNavbar order-md-2" id="mainNavbar2">
            <ul class="navbar-nav mx-md-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/voucher">vouchery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/pricing">pakiety</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">kontakt</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section>
    <div class="container">
        <div class="row">
            <div class="col vh-100">
                <p class="text-center">
                    Center
                </p>
            </div>
        </div>
    </div>
</section>

如果您包含与您的徽标匹配的大小合适的占位符图像，也会很有帮助。我猜是 120 x 40

Bootstrap 5 中的两列折叠导航栏不起作用

Two-column collapsed navbar in Bootstrap 5 doesn't work

html

css

bootstrap-5