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

Question

过去几年我一直在断断续续地学习 Bootstrap，并想用它来更新我的作品集网站。我确实问了一个关于小视图中导航栏的问题，该问题即将得到解决：

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

提供的答案是使用 flex 来调整导航栏，按照我希望它在小视图中显示的方式，但在大视图中创建了另一个问题，我认为这与具有空 svg 和投资组合跨度的容器有关：

我得到的建议是在小视图中将 flex 添加到我的额外 css 中：

.nav-item {
  flex: 0 0 150px;
  display: flex;
}

我有点理解这个建议。在小视图中的额外 css 中：

.nav-item 通过将其设置为 0 来防止缩小和增长，并将其设置为 150 像素的特定宽度。

然后它让我查看带有空 svg 和投资组合跨度的容器：

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

我是否需要缩小容器才能使链接显示在一行上？ 如果是的话，那是怎么写的？我是否需要调整容器类并将其命名为其他名称，然后在大视图中的额外 css 中将宽度更改为特定的像素数？这是完整的 html：

<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 中更改大视图中 .nav-pills 的宽度：

nav-pills {
    width: 900px;
 }

这确实将所有链接放在一行上，但链接之间的间距不相等：

我希望博客链接与蓝色框的边缘对齐，并且链接在大视图中具有相等的间距：

谢谢你，

Answer 1

根据文档中的实际

.navbar

示例构建，使用flexbox实用程序在不同的断点处调整内容。然后只需使用断点特定的

.col-*

类来设置响应宽度。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<nav class="navbar bg-white">
  <div class="container-fluid flex-wrap justify-content-center justify-content-md-between">
    <a class="navbar-brand" href="#"><span class="fs-4">Portfolio</span></a>

    <ul class="nav nav-pills justify-content-between">
      <li class="nav-item col-4 col-md-auto"><a href="#" class="nav-link active" aria-current="page">About</a></li>
      <li class="nav-item col-6 col-sm-4 col-md-auto"><a href="#" class="nav-link">PowerPoint</a></li>
      <li class="nav-item col-6 col-sm-4 col-md-auto"><a href="#" class="nav-link">Infographics</a></li>
      <li class="nav-item col-6 col-sm-4 col-md-auto"><a href="#" class="nav-link">Logos and Icons</a></li>
      <li class="nav-item col-6 col-sm-4 col-md-auto"><a href="#" class="nav-link">Web Design</a></li>
      <li class="nav-item col-6 col-sm-4 col-md-auto"><a href="#" class="nav-link">Blog</a></li>
    </ul>
  </div>
</nav>

我不明白为什么你需要一个空的 svg，所以我省略了它。