Bootstrap Navbar文本对齐实现：复刻Max Back网站样式求助

我想要实现指定的文本对齐Navbar样式，目前我的Navbar样式未达到预期，尝试了2天仍无法复刻目标效果，以下是我的Bootstrap 5代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container bg-light mt-5">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <img src="assets/icon.jpg" width="48" height="48" class="rounded-circle" alt="">
      <span>Emre İlhan</span>
      <img src="assets/icons8-verified-account-20.png" alt="">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="nav nav-pills ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#"><span class="tex-black-50">01</span> Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="tex-black-50">02</span> Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="tex-black-50">03</span> Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

修改后的代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container bg-light mt-5">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <!-- 左侧元素容器：实现垂直居中+均匀间距 -->
      <div class="d-flex align-items-center gap-2">
        <img src="assets/icon.jpg" width="48" height="48" class="rounded-circle" alt="用户头像">
        <span class="fw-bold">Emre İlhan</span>
        <img src="assets/icons8-verified-account-20.png" alt="认证标识">
      </div>
      
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="nav nav-pills ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#"><span class="text-black-50">01</span> Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="text-black-50">02</span> Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="text-black-50">03</span> Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

核心调整说明 #

• 用d-flex align-items-center gap-2包裹左侧的头像、名称和验证图标，实现垂直居中对齐，同时通过gap-2给元素间添加均匀间距，避免拥挤
• 修正拼写错误：tex-black-50改为text-black-50，确保文字颜色样式正常生效
• 给图片添加语义化alt文本，提升页面可访问性
• 保留右侧导航栏的ms-auto属性，确保导航项始终靠右对齐

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