Bootstrap 5 的水平导航布局

Question

我很难 Bootstrap 水平显示我的导航选项（即类似于 https://getbootstrap.com/docs/5.0/components/navbar/#nav 的 Bootstrap 文档中显示的示例）

明确一点：在我的 Codepen 示例中，Home Features Pricing 应该水平显示，而不是垂直显示。

我认为问题可能与我在<body>中使用flex-column有关。但是我不能在不破坏我设计中的其他项目的情况下删除它（例如粘性页脚 - 使用 flex 作为粘性页脚比设置固定高度等的 hacky 替代方案更干净）。

所以我真的有点卡住了！

Answer 1

唯一的问题是导航栏缺少 navbar-expand class..

<nav class="navbar navbar-light navbar-expand bg-light">
  ...
</nav>

Bootstrap 导航栏优先移动，因此默认情况下它是折叠的。如文档所示...

"Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes."

Horizontal nav layout with Bootstrap 5