如何在小屏幕下将垂直胶囊导航（Vertical Pills）转换为水平标签页（Horizontal Tabs）

当然可以实现！你只需要利用Bootstrap的响应式Flex布局类和栅格系统来适配不同屏幕尺寸，不需要额外写复杂的CSS媒体查询。下面是具体的修改方案：

核心思路 #

Bootstrap的flex-*类支持断点前缀（比如md-），我们可以设置：

• 在中等屏幕及以上（≥768px）保持垂直胶囊导航
• 在小屏幕（<768px）自动切换为水平排列的导航

同时调整栅格列的宽度，让小屏幕下导航栏占满整个宽度，避免空间浪费。

修改后的完整代码 #

<div class="row">
  <!-- 调整列的响应式宽度：小屏幕占满12列，大屏幕占2列 -->
  <div class="col-md-2 col-12">
    <!-- 用flex-md-column代替flex-column：md及以上垂直，小屏幕默认水平 -->
    <div class="nav nav-pills flex-md-column" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <!-- 内容区同样调整响应式宽度：小屏幕占满12列，大屏幕占9列 -->
  <div class="col-md-9 col-12 mt-md-0 mt-3">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">first</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">second</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">third</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">forth</div>
    </div>
  </div>
</div>

关键修改点说明 #

1. 导航的Flex方向：

   • 把原来的flex-column换成flex-md-column，意思是仅在md（768px）及以上屏幕使用垂直排列，小屏幕下默认使用flex-row（水平排列）。
   • 如果你想在更小的断点切换（比如sm，576px），可以改成flex-sm-column。

2. 栅格列的响应式调整：

   • 导航列：col-md-2 col-12 → 大屏幕占2列，小屏幕占满12列（整行宽度）。
   • 内容列：col-md-9 col-12 → 对应调整宽度，同时添加mt-md-0 mt-3，让小屏幕下内容和导航之间有间距，大屏幕下取消间距。

3. 关于Bootstrap版本的注意：

   • 如果你用的是Bootstrap 5，需要把data-toggle改成data-bs-toggle，aria-orientation="vertical"可以保留，Bootstrap会自动根据Flex方向调整这个属性的实际表现。

这样修改后，你的导航在大屏幕上保持垂直胶囊样式，小屏幕会自动变成水平排列的导航，完美适配不同设备！

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