Bootstrap 5响应式侧边菜单下拉列展开异常问题求助

问题分析 #

你基于Bootstrap 5开发的多级响应式侧边菜单，下拉菜单本该垂直列展开，但打开时先横向扩展再堆叠，核心原因如下：

• 父容器使用col-auto会自适应内容宽度，下拉菜单展开时会先撑宽容器
• Bootstrap默认的collapse组件动画同时包含宽度和高度过渡，导致出现横向扩展的视觉效果
• 子菜单的flex-column垂直布局设置，优先级低于父容器的宽度自适应变化

解决方案 #

方法1：给侧边栏容器固定宽度（推荐） #

将侧边栏的col-auto替换为固定宽度类，比如col-12 col-sm-3，避免容器随内容自适应宽度：

<div class="col-12 col-sm-3"> <!-- 替换原有的col-auto -->
  <div class="container-fluid" style="padding: 0">
    <div class="row" style="margin-right: 0">
      <div class="d-flex flex-column justify-content-between bg-body-tertiary min-vh-100" style="padding-right: 0">
        <!-- 原有菜单内容保持不变 -->
      </div>
    </div>
  </div>
</div>

方法2：自定义CSS强制子菜单宽度并修改动画 #

给子菜单添加宽度限制，同时覆盖Bootstrap的collapse过渡效果，仅保留高度变化：

/* 强制子菜单占满父容器宽度，避免横向扩展 */
#menu .collapse {
  width: 100%;
  min-width: 0;
}

/* 仅保留高度过渡动画，取消宽度变化动画 */
.collapsing {
  width: auto !important;
  transition: height 0.35s ease !important;
}

方法3：调整子菜单嵌套结构 #

将子菜单的ms-1替换为Bootstrap内边距类ps-3，同时添加w-100确保子菜单占满父宽度：

<ul class="nav collapse ps-3 flex-column w-100" id="menu1" data-bs-parent="#menu">
  <li class="nav-item">
    <a href="" class="nav-link" aria-current="page">项目1</a>
  </li>
  <li class="nav-item">
    <a href="" class="nav-link" aria-current="page">项目2</a>
  </li>
</ul>

最终优化整合代码 #

<div class="col-12 col-sm-3">
  <div class="container-fluid" style="padding: 0">
    <div class="row" style="margin-right: 0">
      <div class="d-flex flex-column justify-content-between bg-body-tertiary min-vh-100" style="padding-right: 0">
        <div class="mt-4">
          <ul class="nav nav-pills flex-column mt-2 mt-sm-0" id="menu">
            <li class="nav-item my-sm-1 my-2">
              <a class="nav-link text-center text-sm-start" href="#menu1" data-bs-toggle="collapse" aria-expanded="false">
                <i class="fa fa-square-plus"></i>
                <span class="ms-2 d-none d-sm-inline">主菜单</span>
              </a>
              <ul class="nav collapse ps-3 flex-column w-100" id="menu1" data-bs-parent="#menu">
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目1</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目2</a>
                </li>
              </ul>
            </li>
            <li class="nav-item my-sm-1 my-2">
              <a class="nav-link text-center text-sm-start" href="#menu2" data-bs-toggle="collapse">
                <i class="fa fa-gear"></i>
                <span class="ms-2 d-none d-sm-inline">选项1</span>
              </a>
              <ul class="nav collapse ps-3 flex-column w-100" id="menu2" data-bs-parent="#menu">
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目1</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目2</a>
                </li>
              </ul>
            </li>
            <li class="nav-item my-sm-1 my-2">
              <a class="nav-link text-center text-sm-start" href="#menu3" data-bs-toggle="collapse">
                <i class="fa fa-gear"></i>
                <span class="ms-2 d-none d-sm-inline">选项2</span>
              </a>
              <ul class="nav collapse ps-3 flex-column w-100" id="menu3" data-bs-parent="#menu">
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目1</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目2</a>
                </li>
              </ul>
            </li>
            <li class="nav-item my-sm-1 my-2">
              <a class="nav-link text-center text-sm-start" href="#menu4" data-bs-toggle="collapse">
                <i class="fa fa-gear"></i>
                <span class="ms-2 d-none d-sm-inline">选项3</span>
              </a>
              <ul class="nav collapse ps-3 flex-column w-100" id="menu4" data-bs-parent="#menu">
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目1</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link" aria-current="page">项目2</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

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