Bootstrap 导航栏折叠成一行而不是垂直

Question

我有一个导航栏，它可以很好地折叠，但出于某种原因，当您在折叠后单击切换图标时，项目显示在水平行中，而不是预期的垂直块中。我查看了（并基本上复制了）bootstrap 5 示例页面中的代码，但那里的代码确实按预期工作（折叠后垂直下拉），而我的没有。

    <div class="nav navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Logo</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarToggler">
            <ul class="nav nav-pills">
                <li class="nav-item"><a class="nav-link" href="/link1">Link 1</a></li>
                <li class="nav-item"><a class="nav-link" href="/link2">Link 2</a></li>
                <li class="nav-item"><a class="nav-link" href="/link3">Link 3</a></li>        
            </ul>
        </div>
        </div>
    </div>

我做错了什么？这就是我折叠菜单时得到的结果（应该垂直堆叠在切换图标所在的右侧？

我试过但对我来说，它始终垂直堆叠，而不仅仅是在折叠时

编辑 - 已更新，因此它是实际的 HTML 而不是 Pug 代码，并且还通过删除不重要的元素对其进行了简化。没有额外的 CSS 应用它只是使用 Bootstrap 默认值。

Answer 1

嗯 nav nav-pills classes 是你的代码和 bs 示例之间的区别

  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>

这是 bootstrap 的示例，如您所见，它使用 navbar-nav 而不是 nav nav-pills

如果您想使用 .nav-pills ，您应该将这些 class 设置为您的 .nav 元素

flex-column flex-sm-row

flex-column class 将 flex-direction: column; 设置为您的元素，并且 flex-sm-row 在大于 sm（大于 576px）的设备上恢复该更改

Bootstrap 导航栏折叠成一行而不是垂直

Bootstrap nav collapsing in a row instead of vertically

html

css

twitter-bootstrap

bootstrap-5