使用Bootstrap实现图示并排标签的最优方法是什么？

嘿，想要重现这种并排标签的效果，直接用Bootstrap原生的Nav+Tab组件就搞定啦，这是最省心的方案——官方组件自带样式和交互逻辑，完全不用自己从头折腾CSS和JS。

核心实现思路 #

Bootstrap的nav-tabs类专门用来实现这种横向并排的标签样式，配合tab-content和tab-pane就能快速实现标签切换的内容面板，激活状态的样式、切换动画都是现成的。

完整代码示例 #

<!-- 标签导航栏 -->
<ul class="nav nav-tabs" id="customTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="tab1-btn" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">标签一</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab2-btn" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-controls="tab2" aria-selected="false">标签二</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab3-btn" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab" aria-controls="tab3" aria-selected="false">标签三</button>
  </li>
</ul>

<!-- 对应内容面板 -->
<div class="tab-content" id="customTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-btn">
    这里是标签一对应的内容区域
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-btn">
    这里是标签二对应的内容区域
  </div>
  <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-btn">
    这里是标签三对应的内容区域
  </div>
</div>

实用小拓展 #

• 如果想要圆角胶囊样式的标签，只需要把nav-tabs替换成nav-pills即可
• 若要让标签占满容器宽度，可添加nav-justified类（每个标签宽度均等）或nav-fill类（标签宽度随内容自适应但填满容器）
• 记得引入Bootstrap的CSS和JS文件（或使用官方CDN），否则样式和切换交互无法生效

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