如何实现Bootstrap下拉菜单的li元素横向并排对齐

问题原因 #

你将flex布局规则错写在了单个li子元素上，flex横向排列属性需要作用在包含所有li的父级容器（即ul.navbar-nav）才能让子li元素横向并排，单独给li设置flex仅会控制li内部的元素排列，无法实现多个li并排的效果。

修复方案 #

1. 先修复HTML隐藏bug #

你循环生成的多个下拉菜单共用了相同的id属性，会导致下拉触发逻辑异常，需要将id修改为唯一值：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <ul class="navbar-nav m-auto se">
      {% for category in category_list %} 
      <li class="nav-item dropdown second">    
        <!-- id用分类ID拼接保证唯一 -->
        <a class="nav-link dropdown-toggle secon text-dark" href="#" id="catDropdown-{{ category.id }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <strong>{{ category.name }}</strong>
        </a>
        <!-- 和上方id对应 -->
        <ul class="dropdown-menu cat-drop" aria-labelledby="catDropdown-{{ category.id }}">
          {% for subcategory in category.our_categories.all %}
          <li><a class="dropdown-item cat-item text-white text-center" href="{% url 'products:product' subcategory.id %}">{{ subcategory.name }}</a>
          {% endfor %}
        </ul>
    </li>
    {% endfor %}
    </ul>
</nav>

2. 替换为正确的CSS代码 #

删除原来的.second相关样式，给父容器设置横向排列规则：

/* 父容器控制子li横向排列 */
.se {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px; /* 可自定义调整li之间的间距 */
}
/* 如果需要下拉菜单内部的子分类也横向排列，可追加下面的规则，不需要就删掉 */
.cat-drop {
  display: flex !important;
  flex-direction: row !important;
  min-width: auto !important;
}
/* 原有样式保留 */
.secon{
  font-size: 12px;
  margin: 2px !important;
}

补充说明 #

如果需要保留Bootstrap默认响应式规则，仅在大屏（≥992px）下横向排列、移动端保持纵向堆叠，去掉上面的!important，改用媒体查询即可：

@media (min-width: 992px) {
  .se {
    flex-direction: row;
    gap: 8px;
  }
}

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