【发布时间】：2021-07-11 05:37:09
【问题描述】：
我正在努力以正确的顺序获取导航栏元素。 在小屏幕（电话）上，折叠按钮显示在链接的顶部，但由于某种原因，在中等屏幕上，它显示在菜单中最后一个链接之前。任何人对此有解决方案并告诉我是什么原因造成的？非常感谢！
代码笔： 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);
}
【问题讨论】：
-
我给你做了一个sn-p。请把它改成minimal reproducible example
-
请点击编辑，向下滚动，点击sn-p上方的编辑。外部链接过时、消失或更改为不再反映问题。
-
你的 codepen 也显示一个空白屏幕
-
@mplungjan 奇怪，它在这里工作。导航栏位于页面底部，很难错过，因为 codepen 页脚具有相同的颜色。感谢您的帮助，因为我是新手
标签： html twitter-bootstrap navbar bootstrap-5