Bootstrap 5小屏幕视图下导航栏链接对齐调整咨询

一、先修正代码结构问题 #

你嵌套了两层<header>标签，这会导致样式冲突，先调整为更清晰的结构：

<header class="fixed-top bg-white py-3">
  <div class="container d-flex flex-wrap justify-content-center">
    <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 flex-md-row flex-column align-items-start gap-2">
      <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">About</a></li>
      <li class="nav-item"><a href="#" class="nav-link">PowerPoint</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Infographics</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Logos and Icons</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Web Design</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
    </ul>
  </div>
</header>

二、解决核心需求 #

1. 小屏幕垂直对齐（替代硬编码margin）

给导航列表添加Bootstrap内置响应式类：

• flex-md-row flex-column：大屏横向排列，小屏幕纵向排列
• align-items-start：小屏幕下所有链接左对齐（对应你的红线标注要求）
• gap-2：统一控制小屏幕下链接的垂直间距，避免硬编码margin导致的适配问题

2. 移除链接下划线

添加以下CSS，覆盖Bootstrap默认的hover/focus下划线样式：

/* 移除导航链接的下划线（包括鼠标悬浮/聚焦状态） */
.nav-link,
.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

三、为什么之前的方法出问题？ #

你之前用硬编码的margin-left: 86px这类数值，属于非响应式写法，会在不同尺寸屏幕上错位，且可能因CSS优先级冲突，意外覆盖Logo的text-decoration-none和垂直对齐样式。用Bootstrap内置类+统一CSS规则，完全避免这类问题。

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