我正在使用引導程式 5 實作側邊欄。
如果我單擊用戶姓名首字母（折疊），我想得到這樣的結果：
但相反，我得到了這個：
我認為這與d-flex，在 SO 上發現了幾個問題有關，但沒有一個解決了我的問題。
如何“分離”兩個塊中的內容并在它們之間添加隔斷線而不是創建兩列？
JS 小提琴現場演示
相關部分代碼：
<ul class="list-unstyled components">
<li class="nav-item">
<a class="btn btn-primary d-flex" data-toggle="collapse" href="#sidebarUserProfile" role="button" aria-expanded="false" aria-controls="sidebarUserProfile">
<div class="row">
<span class="userInitials">JW</span>
<div class="d-flex text flex-row align-items-center staff-nav-holder">
<div class="d-flex flex-column">
<span class="staff-name fw-bold">John Walker</span>
<span class="staff-position">PM</span>
</div>
<i id="profile-chevron-down" class="bi bi-chevron-down ml-2">
</i>
</div>
</div>
<div class="row">
<div class="collapse d-block" id="sidebarUserProfile">
<ul class="list-unstyled components">
<li>Customize your homepage</li>
<li>Change your password</li>
<li>Log out</li>
</ul>
</div>
</div>
</a>
</p>
</li>
...
</ul>
uj5u.com熱心網友回復：
發生這種情況是因為您在折疊專案中使用了“d-block”類。折疊的專案不能有“d-block”類因為它意味著：'display: block;'
它違反規則：
.collapse:not(.show) {
display: none;
}
看這支筆：https : //codepen.io/witty_code/pen/zYdwbZW
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/354018.html
標籤：html css 推特引导 bootstrap-5
上一篇：使引導選擇串列透明