我有一個可以很好折疊的導航欄，但是由于某種原因，當您單擊折疊后的切換圖示時，這些專案會顯示在水平行中，而不是預期的垂直塊中。我從 bootstrap 5 示例頁面查看了（并且基本上是復制了）代碼，但是那里的代碼確實按預期作業（折疊后垂直下拉），而我的卻沒有。
<div class="nav navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarToggler">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="/link1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="/link2">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="/link3">Link 3</a></li>
</ul>
</div>
</div>
</div>
我究竟做錯了什么？這就是我折疊選單時得到的（應該垂直堆疊在切換圖示所在的右側？
我在這里嘗試了解決方案，但對我來說，它一直垂直堆疊，而不僅僅是折疊
編輯 - 已更新，因此它是實際的 HTML 而不是 Pug 代碼，并且還通過洗掉不重要的元素來簡化它。沒有應用額外的 CSS，它只是使用 Bootstrap 默認值。
uj5u.com熱心網友回復：
那么這些nav nav-pills類是您的代碼和bs示例之間的區別
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
這是引導程式的示例，您可以看到它使用navbar-navNotnav nav-pills
如果你想使用.nav-pills，你應該將這些類設定為你的.nav元素
flex-column flex-sm-row
flex-column 類設定flex-direction: column;到您的元素和 flex-sm-row 恢復在大于 sm（大于 576px）的設備上的更改
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464150.html
上一篇：使用Thymeleaf/SpringBoot添加多個具有相同名稱欄位的物件
下一篇：使用100%時離開列的背景顏色