如何调整Bootstrap导航栏高度并使其上下间距相等？

我使用了Bootstrap 5.3官方示例里的首个header组件，当前代码如下：

<div class="container fixed-top bg-white">
      <header class="d-flex flex-wrap justify-content-center py-3 mb-4">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
          <span class="fs-4">Portfolio</span>
        </a>
  
        <ul class="nav nav-pills">
          <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
          <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        </ul>
      </header>
    </div>

当前导航栏显示效果：

希望调整后达到的效果：

具体调整方案 #

通过修改元素的内边距和垂直对齐类，就能实现目标效果：

1. 修改header的布局类与内边距
   移除默认的py-3 mb-4，替换为py-2（可根据需求调整数值控制整体高度），同时新增align-items-center确保内部元素垂直居中，保证上下间距均匀。

2. 统一导航链接的内边距
   给所有nav-link添加py-3（对应header的内边距调整，保证导航项高度与左侧logo区域匹配）。

修改后的完整代码：

<div class="container fixed-top bg-white">
  <header class="d-flex flex-wrap justify-content-center align-items-center py-2">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
      <span class="fs-4">Portfolio</span>
    </a>

    <ul class="nav nav-pills">
      <li class="nav-item"><a href="#" class="nav-link active py-3" aria-current="page">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link py-3">Features</a></li>
      <li class="nav-item"><a href="#" class="nav-link py-3">Pricing</a></li>
      <li class="nav-item"><a href="#" class="nav-link py-3">FAQs</a></li>
      <li class="nav-item"><a href="#" class="nav-link py-3">About</a></li>
    </ul>
  </header>
</div>

补充说明 #

• align-items-center是核心：让header内部的logo和导航栏垂直居中，避免上下偏移导致间距不均。
• 可灵活调整py-2和py-3的数值，微调导航栏的整体高度，直到匹配目标视觉效果。
• 移除mb-4是因为固定导航栏不需要底部外边距，避免干扰页面其他内容的布局。

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