寻求Bootstrap 4两列标签页（胶囊式）实现方案及代码片段

没问题！我刚好有个适配Bootstrap 4的实现方案，能完美满足你要的「左侧图标+右侧标题+副标题」的标签/胶囊导航需求，直接上代码和细节说明：

胶囊式导航（Nav Pills）示例 #

<!-- 导航栏 -->
<ul class="nav nav-pills flex-column flex-sm-row" id="iconTabNav" role="tablist">
  <li class="nav-item">
    <a class="nav-link active d-flex align-items-center" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">
      <i class="fas fa-home mr-3"></i> <!-- 可替换为任意图标库，比如Bootstrap Icons -->
      <div>
        <span class="d-block font-weight-bold">首页</span>
        <span class="d-block small text-muted">回到主页</span>
      </div>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link d-flex align-items-center" id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
      <i class="fas fa-user mr-3"></i>
      <div>
        <span class="d-block font-weight-bold">个人资料</span>
        <span class="d-block small text-muted">查看你的信息</span>
      </div>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link d-flex align-items-center" id="messages-tab" data-toggle="pill" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
      <i class="fas fa-envelope mr-3"></i>
      <div>
        <span class="d-block font-weight-bold">消息</span>
        <span class="d-block small text-muted">新消息通知</span>
      </div>
    </a>
  </li>
</ul>

<!-- 对应的标签内容区域 -->
<div class="tab-content mt-3" id="iconTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    这里是首页的内容区域
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    这里是个人资料的内容区域
  </div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
    这里是消息的内容区域
  </div>
</div>

标签式导航（Nav Tabs）切换 #

如果想要换成标签样式的导航，只需要把上面代码里的nav-pills替换成nav-tabs即可，其他结构完全通用。

自定义样式优化（可选） #

可以添加一点CSS让布局更美观：

/* 调整导航项的内边距，提升交互体验 */
.nav-pills .nav-link, .nav-tabs .nav-link {
  padding: 0.75rem 1rem;
}

/* 激活状态下，让副标题颜色更协调 */
.nav-pills .nav-link.active .text-muted {
  color: rgba(255,255,255,0.7) !important;
}

.nav-tabs .nav-link.active .text-muted {
  color: #495057 !important;
}

关键实现细节 #

• 用Bootstrap内置的d-flex + align-items-center实现图标和文字的垂直居中对齐
• d-block让标题和副标题各自独占一行，保证布局清晰
• flex-column flex-sm-row实现响应式效果：移动端垂直排列导航，桌面端水平排列
• 图标部分用了Font Awesome，你可以替换成Bootstrap Icons或者自定义SVG图标

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