如何实现导航栏（navbar）中li元素的左右对齐布局？

问题分析 #

你当前的代码存在两个问题：一是<a>（Logo标签）直接嵌套在<ul>里不符合HTML语义规范（<ul>的子元素只能是<li>）；二是单个navbar-nav无法实现左右分散对齐+中间Logo的布局。下面用Bootstrap自带的Flex布局类来解决，无需额外写太多自定义CSS。

修改方案 #

核心思路是把导航拆成左导航组、中间Logo、右导航组三个部分，利用Bootstrap的flex布局类和间距控制类实现自动对齐：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-between align-items-center" id="navbarNav">
    <!-- 左导航组 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">ABOUT US</a>
      </li>
    </ul>
    <!-- 中间Logo -->
    <a href="#" class="navbar-brand mx-3">
      <img src="images/logo.png" alt="Logo" style="height: 40px;">
    </a>
    <!-- 右导航组 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

关键说明 #

• 给collapse容器添加justify-content-between：让内部三个元素自动分散对齐，左右导航贴边，中间Logo居中。
• 添加align-items-center：确保所有元素在垂直方向上居中对齐。
• 用navbar-brand类包裹Logo：符合Bootstrap导航栏语义，自带垂直居中样式；mx-3给Logo左右添加间距，避免和导航项贴得太近。
• 拆分navbar-nav为两个独立列表：分别承载左右导航项，结构更规范。

自定义样式补充（可选） #

如果需要调整Logo大小或导航项间距，可添加少量CSS：

/* 调整Logo最大尺寸 */
.navbar-brand img {
  max-height: 50px;
}
/* 调整导航项左右间距 */
.nav-item {
  margin: 0 10px;
}

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