Bootstrap 5中Home按钮无法居中的CSS修复求助

你的问题出在左侧的navbar-brand元素占据了空间，导致justify-content-center只能让导航内容在剩余空间里居中，而非整个屏幕宽度内居中。以下是两种可行的解决方式：

方法一：使用Bootstrap内置类调整布局 #

修改navbar结构，把品牌和折叠内容放入flex容器，利用Bootstrap flex类实现整体居中：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-success" aria-label="Third navbar example">
  <div class="container-fluid d-flex flex-column align-items-center">
    <!-- 品牌单独一行，全屏幕尺寸下居中 -->
    <a class="navbar-brand mb-2" href="#">Book Finder</a>
    <button class="navbar-toggler mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-100 justify-content-center">
      <ul class="navbar-nav mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" [routerLink]="['/homepage']">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这种方式将品牌和导航内容分为两行，确保Home按钮在所有屏幕尺寸下都能居中显示。

方法二：自定义CSS强制导航内容占满宽度 #

若想保持品牌和导航在同一行，同时让Home按钮居中，可通过CSS让折叠容器占据剩余空间：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .navbar-collapse.full-width {
    flex: 1;
    justify-content: center;
  }
</style>
<nav class="navbar navbar-expand-sm navbar-dark bg-success" aria-label="Third navbar example">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Book Finder</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse full-width">
      <ul class="navbar-nav mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" [routerLink]="['/homepage']">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

给navbar-collapse添加flex:1属性，让它占据容器内除品牌外的所有空间，配合justify-content:center即可让Home按钮在整个屏幕宽度内居中。

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