调整导航栏高度更小

Question

我使用了 bootstrap 示例中的第一个标头：https://getbootstrap.com/docs/5.3/examples/headers/#

我有这个：

<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>

这是当前的导航栏：

如何使顶部和底部空间相等？

谢谢你，

Answer 1

 **<div class="container fixed-top bg-white py-3">
        <header class=" d-flex flex-wrap  justify-content-center py-3 mb-2">**

我不使用 bootstrap，但在标题上方的 div 内填充 y 轴，与底部的填充量相同。

   <style>
        *{
            border: 0.2px solid red;
        }
    </style>

使用标头中的那段代码来分别查看容器/布局，然后您就会明白发生了什么，至少我就是这样做的。

所以一旦你正确地看到了这些部分，你就能弄清楚。