Bootstrap 5：如何让固定标签页内容始终居右显示

一、将“Testing”文本移至右侧与“ENTER”对齐 #

利用Bootstrap的flex布局工具类就能轻松实现对齐效果，分两种常见场景处理：

场景1：“Testing”与“ENTER”在标签页内容内 #

把两者放在d-flex容器中，通过ms-auto将“Testing”自动推至右侧，搭配align-items-center保证垂直居中：

<div class="tab-pane active" id="home-tab-pane">
  <div class="d-flex align-items-center">
    <p>标签页内的其他内容</p>
    <span class="ms-auto">Testing</span>
    <button class="btn btn-primary ms-2">ENTER</button>
  </div>
</div>

场景2：“Testing”固定在所有标签页的顶部 #

如果“Testing”是切换标签页时始终显示的元素，把它和“ENTER”放在tab-content上方的flex容器里：

<div class="d-flex align-items-center justify-content-between mb-3">
  <h5>标签页组标题</h5>
  <div class="d-flex align-items-center">
    <span>Testing</span>
    <button class="btn btn-primary ms-2">ENTER</button>
  </div>
</div>
<div class="tab-content" id="myTabContent">
  <!-- 各标签页内容 -->
</div>

核心是用Bootstrap内置的布局类，不用额外写CSS，完全贴合框架设计逻辑。

二、添加Facebook/Twitter类SVG图标 #

完全可以在该区域添加社交SVG图标，推荐用内嵌SVG代码的方式，灵活度最高，示例如下：

<div class="d-flex align-items-center">
  <span>Testing</span>
  <!-- Facebook 图标 -->
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#1877f2" class="ms-2" viewBox="0 0 16 16">
    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
  </svg>
  <!-- Twitter 图标 -->
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#1da1f2" class="ms-2" viewBox="0 0 16 16">
    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
  </svg>
  <button class="btn btn-primary ms-3">ENTER</button>
</div>

• 通过width/height调整图标尺寸，fill属性设置品牌色，ms-2/ms-3控制元素间距；
• 也可以用<img>标签引入本地SVG文件，效果一致。

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