如何在 Bootstrap 5 的小视图中调整导航栏中链接的对齐方式

Question

我之前在这里问过有关 Bootstrap 5 导航栏的问题：

调整导航栏高度更小

我确实收到了有用的答案。谢谢。我有一个后续问题：

我想更改小视图中链接的对齐方式。

这就是我所拥有的：

<header>
    <div class="container fixed-top bg-white py-3">
      <header class="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">
          <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>

这是目前的样子：

我希望它看起来像这样：

我尝试的是使用单独的 css 文件来实现最小视图：

@media (min-width: 0px) {
.nav-link-powerpoint{
        margin-top: 5px;
        margin-left: 86px;
    }

    .nav-link-infographic {
      margin-top: 5px;
        margin-left: 39px;
    }

这确实修复了水平对齐：

但现在它似乎覆盖了本节中的垂直对齐和文本装饰：

<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">

有没有办法像这样垂直对齐（红线是显示对齐方式）：

但链接没有下划线。有更好的方法吗？

谢谢你，

Answer 1

与其使用自己编写的 css 来设置链接样式，不如使用引导类作为要在较小屏幕上以不同方式设置样式的元素上的断点。

例如，您可以在 powerpoint 链接上设置

mx-sm-auto

或

ms-sm-5

和

me-sm-5

，以使其在较小的屏幕上表现不同。

您可以在此处阅读有关引导断点的更多信息 Breakpoints-v5 和间距 Spacing-v5