折叠按钮显示在中等屏幕上的链接之间

Question

我正在努力以正确的顺序获取导航栏元素。在小屏幕 (phone) 上，折叠按钮显示在 link 的顶部，但出于某种原因，在中等屏幕上它显示在菜单中最后一个 link 之前。任何人对此都有解决方案并告诉我是什么原因造成的？非常感谢！

代码笔： https://codepen.io/laurent-bosteels/pen/qBRKQor

HTML


      <div class="container-fluid">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">

          <ul class="navbar-nav me-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">HOME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">DISCOVER</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">PRICING</a>
            </li>
          </ul>
        </div>
        <div class="mx-auto order-0">
          <a href="index.html" class="navbar-brand d-none d-lg-block me-auto" alt="logo" aria-label="ad astra logo">

            <svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.1 160.4"
              enable-background="new 0 0 231.1 160.4" xml:space="preserve">
              <g>
                <path class="logo-fill" fill="#959595" d="M228.6,0h-12.5c-1.8,0-3.1,1.2-3.7,3.5l-11.7,36.4h-60.3L128.7,3.5C128.2,1.2,127,0,125.2,0h-12.7
        c-2.2,0-2.9,1.2-2.2,3.5l46.6,153.4c0.7,2.3,2.2,3.5,4.7,3.5h17.9c2.5,0,4.1-1.2,4.7-3.5L230.8,3.5C231.5,1.2,230.8,0,228.6,0z
         M171,141.7h-1l-25.7-86.3h52.3L171,141.7z" />
                <path class="logo-fill" fill="#959595" d="M74.2,3.5C73.6,1.2,72,0,69.5,0H51.6c-2.5,0-4.1,1.2-4.7,3.5L0.2,156.9c-0.7,2.3,0.1,3.5,2.2,3.5h12.5
        c1.8,0,3.1-1.2,3.7-3.5l11.7-36.4h60.3l11.7,36.4c0.5,2.3,1.7,3.5,3.5,3.5h12.7c2.2,0,2.9-1.2,2.2-3.5L74.2,3.5z M34.4,105L60,18.7
        h1L86.7,105H34.4z" />
              </g>
            </svg>
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

CSS

.navbar-custom {
  background-color: #0D1521;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #F8F9F9;
}

.navbar-custom .navbar-brand {
  padding: 0;
}

.nav-link {
  font-size: 1.15rem;
  margin-right: 2rem;
  margin-left: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-nav .nav-item:not(:last-child) {
  border-right: 1px solid rgb(46 57 67);
}

Answer 1

如果您只想在菜单打开时将折叠按钮放在菜单顶部，那么您可以将该按钮放在导航栏的开头。然后，当它被点击时，按钮将向上移动屏幕以显示菜单。

order-0,-1,-3好像没什么作用，所以我把它们去掉了。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>


<style>
    .navbar-custom {
        background-color: #0D1521;
    }

    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
        color: #F8F9F9;
    }

    .navbar-custom .navbar-brand {
        padding: 0;
    }

    .nav-link {
        font-size: 1.15rem;
        margin-right: 2rem;
        margin-left: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .navbar-nav .nav-item:not(:last-child) {
        border-right: 1px solid rgb(46 57 67);
    }
</style>

<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-bottom">
    <div class="container-fluid">
        <button class="navbar-toggler mx-auto" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse w-100 order-md-0 dual-collapse2">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DISCOVER</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">PRICING</a>
                </li>
            </ul>
        </div>
        <a href="index.html" class="navbar-brand d-none d-lg-block me-auto" aria-label="ad astra logo">

            <svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.1 160.4" enable-background="new 0 0 231.1 160.4" xml:space="preserve">
                <g>
                    <path class="logo-fill" fill="#959595" d="M228.6,0h-12.5c-1.8,0-3.1,1.2-3.7,3.5l-11.7,36.4h-60.3L128.7,3.5C128.2,1.2,127,0,125.2,0h-12.7
    c-2.2,0-2.9,1.2-2.2,3.5l46.6,153.4c0.7,2.3,2.2,3.5,4.7,3.5h17.9c2.5,0,4.1-1.2,4.7-3.5L230.8,3.5C231.5,1.2,230.8,0,228.6,0z
    M171,141.7h-1l-25.7-86.3h52.3L171,141.7z" />
                    <path class="logo-fill" fill="#959595" d="M74.2,3.5C73.6,1.2,72,0,69.5,0H51.6c-2.5,0-4.1,1.2-4.7,3.5L0.2,156.9c-0.7,2.3,0.1,3.5,2.2,3.5h12.5
    c1.8,0,3.1-1.2,3.7-3.5l11.7-36.4h60.3l11.7,36.4c0.5,2.3,1.7,3.5,3.5,3.5h12.7c2.2,0,2.9-1.2,2.2-3.5L74.2,3.5z M34.4,105L60,18.7
    h1L86.7,105H34.4z" />
                </g>
            </svg>
        </a>
        <div class="navbar-collapse collapse w-100 dual-collapse2">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
        
    </div>
</nav>

折叠按钮显示在中等屏幕上的链接之间

Collapse button showing up in between links on medium screen

html

navbar

twitter-bootstrap

bootstrap-5