如何在Bootstrap中实现汉堡菜单的菜单项横向并排展示

Bootstrap 5 中.navbar-nav类在移动端断点（<768px）下默认设置了flex-direction: column属性，所以菜单项会纵向逐个排列。你可以通过浏览器开发者工具（按下F12唤起）选中对应.navbar-nav元素，在样式面板中直接查看所有Bootstrap自带的关联样式属性。

实现横向排列的两种方案 #

方案1：使用Bootstrap自带工具类（无需编写自定义CSS）

直接给<ul class="navbar-nav">添加内置工具类即可，修改后的代码如下：

<ul class="navbar-nav flex-row gap-3">

属性说明：

• flex-row：将弹性容器的主轴改为横向，让子元素横向排列
• gap-3：设置菜单项之间的间距，数值可根据需求调整为1~5

方案2：自定义CSS覆盖默认样式

如果需要更精细的样式控制，可以添加如下自定义CSS规则：

@media (max-width: 767px) {
  .navbar-nav {
    flex-direction: row;
    column-gap: 16px; /* 可自定义调整菜单项间距 */
  }
}

该媒体查询仅在屏幕宽度小于768px时生效，不会影响大屏下的导航布局。

小提示：你当前引入的是Bootstrap栅格精简CSS，navbar相关的基础样式可能存在缺失，建议引入完整的Bootstrap核心CSS文件保证组件样式正常生效。

内容的提问来源于stack exchange，提问作者Tim Taylor