Bootstrap 4：如何水平对齐下拉菜单内的元素？

这个问题我碰到过不少次，Bootstrap的下拉菜单默认垂直布局确实会让这种并排需求有点棘手。你之前加row和col-4没生效的核心原因是Bootstrap的.dropdown-menu默认设置了flex-direction: column，不管你里面嵌套多少栅格类，子元素都会被强制垂直堆叠。下面给你一套可行的解决方案：

1. 核心思路 #

我们需要覆盖.dropdown-menu的默认flex方向，把它改成水平排列，同时给下拉菜单设置足够的宽度，确保三个分类能并排展示，再用Bootstrap的栅格类给每个分类分配宽度。

2. 完整代码示例 #

HTML结构 #

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    筛选菜单
  </button>
  <!-- 自定义dropdown-menu类，用来覆盖默认样式 -->
  <div class="dropdown-menu dropdown-menu-horizontal">
    <!-- 三个分类容器，用col-4均分宽度 -->
    <div class="col-4 px-3">
      <h6 class="dropdown-header">分类一</h6>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="filter1-1">
        <label class="form-check-label" for="filter1-1">选项1</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="filter1-2">
        <label class="form-check-label" for="filter1-2">选项2</label>
      </div>
    </div>
    <div class="col-4 px-3">
      <h6 class="dropdown-header">分类二</h6>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="filter2-1">
        <label class="form-check-label" for="filter2-1">选项3</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="filter2-2">
        <label class="form-check-label" for="filter2-2">选项4</label>
      </div>
    </div>
    <div class="col-4 px-3">
      <h6 class="dropdown-header">分类三</h6>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="filter3-1">
        <label class="form-check-label" for="filter3-1">选项5</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="filter3-2">
        <label class="form-check-label" for="filter3-2">选项6</label>
      </div>
    </div>
  </div>
</div>

自定义CSS #

/* 覆盖dropdown-menu的默认flex方向，设置足够宽度 */
.dropdown-menu-horizontal {
  display: flex;
  flex-direction: row;
  width: 600px; /* 根据你的需求调整宽度 */
  padding: 1rem;
}

/* 给每个分类容器添加内边距，避免内容挤在一起 */
.dropdown-menu-horizontal .col-4 {
  min-width: 180px; /* 确保小屏幕下每个分类不会太窄 */
}

/* 响应式优化：小屏幕下恢复垂直布局 */
@media (max-width: 768px) {
  .dropdown-menu-horizontal {
    flex-direction: column;
    width: auto;
  }
}

3. 关键细节说明 #

• 为什么不用原生row？因为.dropdown-menu的默认flex-direction: column会让row的水平布局失效，我们需要先把dropdown-menu本身改成水平flex容器。
• 设置固定宽度是为了避免三个分类挤在一起，你可以根据实际内容调整这个值，或者用min-width替代固定宽度。
• 添加响应式媒体查询是为了在手机等小屏幕设备上，让菜单变回垂直布局，保证用户体验。

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