Bootstrap 5导航栏：如何让分页胶囊在全屏幕尺寸下居中

你的问题出在在navbar里嵌套row时未处理好Bootstrap默认间距冲突，同时栅格列宽设置不符合大屏幕布局逻辑。navbar本身是flex容器，直接利用它的flex特性布局比嵌套栅格更适配，具体修正方案如下：

核心问题分析 #

• navbar-expand-lg在大屏幕下会启用navbar的flex布局，而嵌套的row自带负margin，和navbar的padding叠加后导致整体内容偏移。
• col-lg-10给分页区域留了过宽空间，反而让居中的分页视觉不协调，容易出现布局混乱。

修正后的代码（推荐方案） #

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top border border-3 border-danger border-top-0 border-start-0 border-end-0">
    <div class="container-fluid">
        <!-- 左侧Logo：flex-shrink-0避免被压缩 -->
        <div class="flex-shrink-0">
            <img src="你的logo地址" alt="Logo">
        </div>

        <!-- 中间分页：flex-grow-1填充剩余空间，内部居中 -->
        <div class="flex-grow-1 d-flex justify-content-center align-items-center tiny-text">
            <nav aria-label="">
                <ul class="pagination justify-content-center m-0">
                  <li class="page-item">
                    <a class="page-link p-1 px-lg-3 previous_page" href="#" aria-label="Previous">
                      <i aria-hidden="true" class="bi-chevron-double-left text-danger"></i>
                    </a>
                  </li>
                  <li class="page-item active" data-page="0"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">1</a></li>
                  <li class="page-item" data-page="1"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">2</a></li>
                  <li class="page-item" data-page="2"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">3</a></li>
                  <li class="page-item" data-page="3"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">4</a></li>
                  <li class="page-item">
                    <a class="page-link p-1 px-lg-3 next_page" href="#" aria-label="Next">
                      <i aria-hidden="true" class="bi-chevron-double-right text-danger"></i>
                    </a>
                  </li>
                </ul>
            </nav>
        </div>

        <!-- 右侧按钮：flex-shrink-0避免被压缩，靠右对齐 -->
        <div class="flex-shrink-0 text-end">
            <i class="bi-cart-fill text-danger fs-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#cart-panel" aria-controls="cart-panel"></i>
        </div>
    </div>
</nav>

关键修改点 #

• 移除嵌套的row和col类，改用navbar原生flex布局类：
  • flex-shrink-0：让logo和购物车按钮保持固定宽度，不会被压缩变形。
  • flex-grow-1：让中间分页区域自动填充logo和按钮间的剩余空间，确保分页始终居中。
  • d-flex justify-content-center align-items-center：保证分页区域内部内容垂直水平居中。

保留栅格布局的替代方案 #

如果一定要用栅格，需消除row的gutter并调整container-fluid的padding：

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top border border-3 border-danger border-top-0 border-start-0 border-end-0">
    <div class="container-fluid px-0">
        <div class="row align-items-center g-0">
            <div class="col-3 col-sm-2 col-lg-1">
              <img src="你的logo地址" alt="Logo">
            </div>

            <div class="col-6 col-sm-8 col-lg-10 tiny-text d-flex justify-content-center">
                <nav aria-label="">
                    <ul class="pagination justify-content-center m-0">
                      <!-- 分页内容不变 -->
                    </ul>
                </nav>
            </div>

            <div class="col-3 col-sm-2 col-lg-1 text-end">
                <i class="bi-cart-fill text-danger fs-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#cart-panel" aria-controls="cart-panel"></i>
            </div>
        </div>
    </div>
</nav>

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