如何仅在移动端居中Bootstrap导航栏的菜单项？

问题描述 #

现有Bootstrap 5导航栏代码，需要在移动端折叠状态下让菜单<li>项居中对齐。之前尝试在<ul>中嵌套<div>来实现，虽然生效但不符合HTML规范（<ul>的直接子元素只能是<li>），需要合法的实现方式。

原导航栏代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </ul>
  </div>
</nav>

合法解决方案 #

方案1：利用Bootstrap响应式flex布局类（推荐）

借助Bootstrap的响应式工具类，直接给<ul>设置不同屏幕尺寸下的对齐方式，无需破坏HTML结构：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
  <div class="collapse navbar-collapse">
    <!-- 移动端折叠时居中，桌面端保持靠右 -->
    <ul class="navbar-nav me-4 my-3 my-lg-0 justify-content-center ms-lg-auto">
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </ul>
  </div>
</nav>

类说明：

• justify-content-center：默认（移动端折叠状态）下，让<ul>这个flex容器内的<li>子元素水平居中
• ms-lg-auto：在lg及以上屏幕（导航栏展开状态），给<ul>添加左侧自动边距，使其靠右对齐，保留原有桌面端布局

方案2：单独设置每个菜单项的文本对齐

如果需要让每个菜单项的文本单独居中（比如折叠后菜单垂直排列时），可以给<li>添加响应式文本对齐类：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
      <!-- 移动端文本居中，桌面端文本左对齐 -->
      <li class="nav-item text-center text-lg-start"><a class="nav-link me-lg-3">Menu Item 1</a></li>
      <li class="nav-item text-center text-lg-start"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </ul>
  </div>
</nav>

为什么之前的写法不规范？ #

HTML规范明确要求<ul>（无序列表）的直接子元素只能是<li>（列表项），嵌套<div>会破坏语义化结构，可能导致浏览器渲染异常、屏幕阅读器识别错误等兼容性或可访问性问题。

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