时间戳

首页 > 解决方案 > 带有列的 Bootstrap 5 导航栏 .. 右侧跳跃的下拉菜单

bootstrap-4 - 带有列的 Bootstrap 5 导航栏 .. 右侧跳跃的下拉菜单

问题描述

我正在尝试使用 Bootstrap 5 beta 1 的导航栏。

这是代码：

<nav class="navbar navbar-light bg-light">
  <a href="" class="navbar-brand">Logo</a>
  <div class="col" style="background-color: grey;">column 1</div>
  <div class="col" style="background-color: red;">column 2</div>
  <div class="col" style="background-color: green;">column 3</div>
  <div class="col" style="background-color: purple; border:1px solid yellow">column 4</div>

  <ul class="navbar-nav me-auto" style="background-color: green;">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle dropdown-menu-left" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</nav>

我的下拉菜单有问题，当我单击它打开时，导航栏只会在下拉菜单打开时展开。

这是一个屏幕截图：

在此处输入图像描述

我怎样才能解决这个问题？

标签： bootstrap-4flexboxbootstrap-5

解决方案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Logo</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100">
            <li class="nav-item flex-fill">
              <a
                class="nav-link active"
                style="background-color: grey;"
                aria-current="page"
                href="#"
                >Column 1</a
              >
            </li>
            <li class="nav-item flex-fill">
              <a class="nav-link" href="#" style="background-color: red;"
                >Column 2</a
              >
            </li>
            <li class="nav-item flex-fill">
              <a class="nav-link" href="#" style="background-color: green;"
                >Column 3</a
              >
            </li>
            <li class="nav-item flex-fill">
              <a
                class="nav-link"
                href="#"
                style="background-color: purple; border: 1px solid yellow;"
                >Column 4</a
              >
            </li>
            <li
              class="nav-item dropdown flex-fill"
              style="background-color: green;"
            >
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

现在下拉菜单正在工作，并且列也像您的情况一样跨越行。我已经使用flex-fill类来跨越列，或者您可以使用flex-grow:1来实现相同的目的。但是在对子元素应用 flex-grow 之前，在父元素上设置 display flex 和一些宽度。

推荐阅读