如何在移动端让Bootstrap 5垂直胶囊导航的标签内容显示在导航链接下方？

这个需求完全可行，下面是兼顾桌面端垂直胶囊布局和移动端内容紧凑排列的具体方案：

核心思路 #

通过拆分DOM结构，结合Bootstrap原生响应式工具类和少量自定义样式，实现双布局无缝切换：

• 桌面端：保留官方示例的「垂直导航组+右侧统一内容区」布局
• 移动端：每个导航项下方直接绑定对应内容块，点击导航按钮控制内容展开/收起，更贴合移动端紧凑布局需求

完整代码实现 #

HTML 结构 #

<!-- 页面容器 -->
<div class="container mt-4">
  <!-- 桌面端专属：垂直导航组 -->
  <div class="d-none d-md-flex align-items-start">
    <div class="nav flex-column nav-pills me-3" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#desktop-home" type="button" aria-selected="true">Home</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#desktop-profile" type="button" aria-selected="false">Profile</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#desktop-messages" type="button" aria-selected="false">Messages</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#desktop-settings" type="button" aria-selected="false">Settings</button>
    </div>
    <!-- 桌面端统一内容区 -->
    <div class="tab-content flex-grow-1">
      <div class="tab-pane fade show active" id="desktop-home">Home内容：这里是首页的详细信息...</div>
      <div class="tab-pane fade" id="desktop-profile">Profile内容：这里是个人资料的详细信息...</div>
      <div class="tab-pane fade" id="desktop-messages">Messages内容：这里是消息中心的详细信息...</div>
      <div class="tab-pane fade" id="desktop-settings">Settings内容：这里是设置页面的详细信息...</div>
    </div>
  </div>

  <!-- 移动端专属：导航+内容组 -->
  <div class="d-md-block d-lg-none">
    <!-- Home 项 -->
    <div class="mb-3">
      <button class="nav-link active w-100" data-bs-toggle="collapse" data-bs-target="#mobile-home" aria-expanded="true">Home</button>
      <div class="collapse show border border-top-0 p-3 rounded-bottom" id="mobile-home">
        Home内容：这里是首页的详细信息...
      </div>
    </div>
    <!-- Profile 项 -->
    <div class="mb-3">
      <button class="nav-link w-100" data-bs-toggle="collapse" data-bs-target="#mobile-profile" aria-expanded="false">Profile</button>
      <div class="collapse border border-top-0 p-3 rounded-bottom" id="mobile-profile">
        Profile内容：这里是个人资料的详细信息...
      </div>
    </div>
    <!-- Messages 项 -->
    <div class="mb-3">
      <button class="nav-link w-100" data-bs-toggle="collapse" data-bs-target="#mobile-messages" aria-expanded="false">Messages</button>
      <div class="collapse border border-top-0 p-3 rounded-bottom" id="mobile-messages">
        Messages内容：这里是消息中心的详细信息...
      </div>
    </div>
    <!-- Settings 项 -->
    <div class="mb-3">
      <button class="nav-link w-100" data-bs-toggle="collapse" data-bs-target="#mobile-settings" aria-expanded="false">Settings</button>
      <div class="collapse border border-top-0 p-3 rounded-bottom" id="mobile-settings">
        Settings内容：这里是设置页面的详细信息...
      </div>
    </div>
  </div>
</div>

自定义样式（优化视觉） #

/* 移动端导航按钮圆角适配 */
.d-md-block .nav-link {
  border-radius: 0.375rem 0.375rem 0 0;
  border: 1px solid #dee2e6;
}
/* 移动端内容块圆角适配 */
.d-md-block .collapse {
  border-radius: 0 0 0.375rem 0.375rem;
}

方案优势 #

1. 完全基于Bootstrap原生组件（nav-pills、collapse、tab-content）开发，无额外依赖
2. 响应式切换通过Bootstrap内置的d-none/d-md-flex等工具类实现，逻辑简洁易维护
3. 移动端采用折叠组件，符合移动端用户点击展开内容的交互习惯
4. 桌面端严格保留官方垂直胶囊导航的视觉和交互体验

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