Bootstrap 5侧边栏可折叠<a>标签内div内容如何换行而非行内显示

问题原因 #

触发折叠的<a>标签设置d-flex属性后默认是水平排列，内部两个.row元素被放在同一行，所以会出现两列布局，而不是你想要的上下堆叠效果。

修复方案 #

1. 给<a>标签的类追加flex-column，让flex容器改为垂直排列，子元素自动上下堆叠
2. 移除折叠容器上的d-block类，这个类会强制元素显示，覆盖collapse的隐藏逻辑，导致折叠动画失效
3. 如果你使用的是Bootstrap 5，需要把原Bootstrap 4的data-toggle属性替换为Bootstrap 5对应的data-bs-toggle，保证折叠功能正常触发

修正后代码 #

<ul class="list-unstyled components">
    <li class="nav-item">
        <a class="btn btn-primary d-flex flex-column" data-bs-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" id="sidebarUserProfile">
                    <ul class="list-unstyled components">
                        <li>自定义首页</li>
                        <li>修改密码</li>
                        <li>退出登录</li>
                    </ul>
                </div>
            </div>
        </a>
    </li>
    ...
</ul>

内容的提问来源于stack exchange，提问作者Cheknov