我如何才能集中引导肚脐菜单项仅为移动？

Question

我用的是下面的肚脐。我需要能够集中菜单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>

​

我想出的解决方案如下：

<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">     
    <div class="d-flex flex-row justify-content-center">           
        <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
    </div>
    <div class="d-flex flex-row justify-content-center">
        <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </div>
</ul>

但是正如注释中提到的，这不是一个有效的HTML --将div作为list元素的子元素

确实有用。但无效-那我怎么才能把它们正确地集中起来呢？

Answer 1

这可能只是对较小的断点有选择地应用文本对齐的问题。

注意：d-block添加到折叠元素中仅用于这里的演示。查看可选布局的完整页面演示。

​

<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 d-block">
    <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0 text-center">
      <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>

​