Bulma.css导航栏下拉菜单flex-wrap无法实现多元素并排自动换行

失效原因 #

你之前尝试的方案未生效，核心原因是Bulma默认给.navbar-dropdown下的.navbar-item设置了width: 100%的全局样式，导致每个菜单项默认占满整行宽度，即使开启flex布局也无法横向排列。

修复代码 #

只需添加以下自定义CSS覆盖Bulma默认规则即可实现预期效果：

/* 下拉菜单容器样式 */
.navbar-dropdown {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px; /* 可自定义你需要的最大宽度，适配你的页面布局 */
  gap: 4px 12px; /* 可自定义菜单项的行间距和列间距 */
}

/* 下拉菜单项样式 */
.navbar-dropdown .navbar-item {
  width: auto; /* 覆盖默认100%宽度 */
  flex: 0 0 auto; /* 保持菜单项宽度随内容自适应，无需拉伸 */
  white-space: nowrap; /* 可选：避免菜单项内部文字折行 */
}

可选扩展：固定每行显示数量 #

如果你需要每行固定显示N个菜单项，可调整.navbar-item的flex规则，比如每行显示5个的配置如下：

.navbar-dropdown .navbar-item {
  width: auto;
  flex: 0 0 calc(20% - 10px); /* 20%对应每行5个，减去的数值对应gap的列间距 */
  white-space: nowrap;
}

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