修复向左偏移的Bootstrap导航栏问题

先修正代码里的语法错误 #

原代码存在几处语法/拼写错误，这会导致Bootstrap功能失效或布局异常：

• <a class="navbar-title">的闭合标签错误写成了</span>，需改为</a>
• 「Contact Us」对应的<a>标签未闭合，缺少>
• 汉堡按钮的触发属性拼写错误：data-btarget → data-bs-target
• 汉堡图标类名错误：navbar-toggle-icon → navbar-toggler-icon

实现需求的布局调整 #

要实现「标题图标居左、导航项靠右」且整体不偏移的效果，只需调整Bootstrap的布局类：

1. 给导航栏内的.container添加d-flex justify-content-between align-items-center，让容器内元素两端对齐且垂直居中
2. 将导航列表的mx-auto（水平居中）改为ms-auto（自动左外边距，实现靠右对齐）

修正后的完整代码 #

<nav class="navbar navbar-expand-lg">
  <div class="container d-flex justify-content-between align-items-center"> 
    <a class="navbar-title" href="home.html">
      Title
      <img class="navbar-brand" src="https://i.imgur.com/qRujsE0.jpg" alt="="社团图标">
    </a> 
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navmenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a href="home.html" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
        <li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a></li>
        <li class="nav-item"><a href="join.html" class="nav-link">Join Us</a></li>
      </ul>
    </div>
  </div>
</nav>

补充说明 #

• .justify-content-between会让容器内的子元素（品牌区、汉堡按钮、导航区）自动分布在容器的左右两端
• .ms-auto会给导航列表添加自动左外边距，在flex布局中会被推到容器右侧
• 给图片添加alt属性是为了页面可访问性规范，提升用户体验

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