我正在使用 bootstrap5 和 vue.js 制作回應式導航欄。我使用引導示例制作了一個簡單的回應式導航欄，但是當我進行一些修改并使用“折疊按鈕”時會出現一些問題。下圖是我的導航欄。（桌面用戶界面和移動用戶界面）
這是我通過折疊打開選單欄時的影像。當我打開選單時，右側的徽標和登錄按鈕被推到一邊。（登錄按鈕位于選單欄下方）
這是我的代碼。
<div >
<header :>
<nav >
<div >
<button
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span ></span>
</button>
<a href="/"> LOGO </a>
<!-- menu items -->
<div
id="navbarNavAltMarkup"
>
<div >
<a href="screen1">menu1</a>
<a href="screen1">menu2</a>
<a href="screen1">menu3</a>
<a href="screen1">menu4</a>
</div>
</div>
<a href="login">login</a>
</div>
</nav>
</header>
</div>
我可以知道這個問題的原因和解決方法嗎？先感謝您！
uj5u.com熱心網友回復：
據我了解，您可以復制登錄按鈕并將其放在選單項 div 的前面，如下所示：
<div >
<button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
<span ></span>
</button>
<a href="/"> LOGO </a>
<a href="login">login</a>
<!-- menu items -->
<div id="navbarNavAltMarkup">
<div >
<a href="screen1">menu1</a>
<a href="screen1">menu2</a>
<a href="screen1">menu3</a>
<a href="screen1">menu4</a>
</div>
</div>
<a href="login">login</a>
</div>
然后，您可以使用引導隱藏元素類來控制何時顯示/隱藏登錄按鈕。
我希望這個想法對您有所幫助，如果沒有，也許您可??以提供一個示例片段，以便我們可以更多地了解您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/417293.html
標籤：