移动端堆叠式Tabs适配需求：按钮与内容全屏显示

要实现你需要的响应式效果，只需基于现有Bootstrap代码做几处针对性调整，利用框架自带的响应式工具类即可完成需求：

核心修改思路 #

• 控制外层容器的排列方向：移动端纵向堆叠，非移动端横向分栏
• 修正Tab按钮与内容容器的响应式宽度占比
• 优化间距与按钮布局的适配细节

修改后的完整代码 #

HTML部分 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<section <?php theme_section_attr_id() ?>
  <?php theme_section_attr_class( 'main-section position-relative' ) ?>
  <div class="container">
    <div class="row">
      <h1 class="text-center pb-3">In house <strong style="font-weight:700;">Schedule</strong></h1>
      <!-- 响应式flex方向：md及以上横向，移动端纵向 -->
      <div class="d-flex flex-md-row flex-column align-items-start">
        <!-- Tab按钮容器：md及以上col-2，移动端col-12，适配排列方向 -->
        <div class="nav col-md-2 col-12 flex-md-column flex-row nav-pills me-md-3 mb-3 mb-md-0" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <button class="nav-link border-0 btn-new btn-1 px-3 pb-0 pt-3 mb-4 active text-start text-md-left" id="v-pills-1-tab" data-bs-toggle="pill" data-bs-target="#v-pills-1" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
                    <small class="m-0">Tuesday</small>
                    <h4 class="text-capitalize" style="font-weight: 600;">May 7th</h4>
                    </button>
          <button class="nav-link border-0 btn-new btn-1 px-3 pb-0 pt-3 mb-4 text-start text-md-left" id="v-pills-2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-2" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
                    <small class="m-0">Wednesday</small>
                    <h4 class="text-capitalize" style="font-weight: 600;">May 8th</h4>
                    </button>
        </div>

        <!-- Tab内容容器：md及以上col-10，移动端col-12 -->
        <div class="tab-content col-md-10 col-12" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-1-tab">

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a href="">link</a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:30 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a href="">link</a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/uploads/2024/04/Group-1000002059.png" alt="" class="img-fluid">
              </div>
            </div>

            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 11:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text</p>
                <a href="">link</a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-2-tab">
            <div class="row pb-5">
              <div class="col-lg-2 text-center">
                <strong> 10:00 AM </strong>
              </div>
              <div class="col-lg-8 double-border px-5">
                <strong>title</strong>
                <p class="mt-2">text.</p>
                <a href="">link</a>
              </div>
              <div class="col-lg-2 d-flex align-items-center justify-content-center">
                <img src="/wp-content/themes/t220908406929/dist/images/logo-dark.svg" alt="" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

可选CSS优化（移动端按钮布局） #

@media (max-width: 767px) {
  #v-pills-tab .nav-link {
    flex: 1;
    text-align: center;
    margin-right: 0.5rem;
  }
  #v-pills-tab .nav-link:last-child {
    margin-right: 0;
  }
}

关键改动说明 #

1. Flex容器方向控制：给外层d-flex添加flex-md-row flex-column，在屏幕宽度≥768px（md断点）时保持横向分栏，小于768px时自动切换为纵向堆叠，实现移动端按钮在上、内容在下的效果。
2. 响应式宽度适配：
   • Tab按钮容器：col-md-2 col-12确保移动端占满100%宽度，非移动端保留2份宽度；搭配flex-md-column flex-row让按钮在移动端横向排列，非移动端纵向排列。
   • Tab内容容器：col-md-10 col-12对应实现移动端100%宽度，非移动端10份宽度的布局。
3. 间距细节优化：将固定间距me-3改为me-md-3，仅在非移动端保留右侧间距；添加mb-3 mb-md-0，给移动端按钮容器增加底部间距，非移动端自动移除。
4. 代码纠错：修复了原HTML中hreff的拼写错误为href，移除了多余的闭合</a>标签。

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