Bootstrap 5 的水平导航布局答案

【问题标题】：Horizontal nav layout with Bootstrap 5Bootstrap 5 的水平导航布局
【发布时间】：2021-04-22 03:27:48
【问题描述】：

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

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

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

所以我真的有点卡住了！

【问题讨论】：

【解决方案1】：

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

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

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

"导航栏需要一个包装的 .navbar .navbar-expand{-sm|-md|-lg|-xl|-xxl} 用于响应式折叠和配色方案类。”

【讨论】：