Bootstrap下拉菜单多列并排布局问题求助

问题核心是Bootstrap的dropdown-menu默认宽度受限，导致内部网格布局无法横向展开，进而让列堆叠。以下是无需硬编码宽度的适配方案：

关键修改点 #

• 移除下拉菜单内的container组件：container自带的max-width和内边距会限制网格布局的横向空间，改用p-3给表单添加内边距即可。
• 给dropdown-menu添加w-auto类：让下拉菜单自动适配内部内容宽度，而非使用默认的固定/受限宽度。
• 拆分操作按钮行：将底部的清除/提交按钮从筛选列所在的row中移出，单独用d-flex容器包裹，避免干扰网格布局。

修改后的完整代码 #

<div class="ms-auto py-4" id="PageFilter">
  <div class="dropdown filter">
    <button class="btn btn-outline-secondary d-flex align-items-center dropdown-toggle" type="button" data-bs-toggle="dropdown">
      <img src="/static/icons/bootstrap/sliders2.svg" class="me-2" height="25" />
      Filter
      <span class="badge bg-danger ms-4">0</span>
    </button>
    <div class="dropdown-menu dropdown-menu-end shadow w-auto">
      <form action="/ajax/page_filter/" method="GET" class="filter p-3">
        <div class="row">
          <div class="col-auto">
            <h6 class="dropdown-header">Region</h6>
            <hr class="mt-0" />
            <div class="overflow-y-auto filter-list" style="max-height: 400px">
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-0-0">
                  <label class="form-check-label" for="filter-0-0">
                    ITEM 1
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-0-1">
                  <label class="form-check-label" for="filter-0-1">
                    ITEM 2
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-auto">
            <h6 class="dropdown-header">State</h6>
            <hr class="mt-0" />
            <div class="overflow-y-auto filter-list" style="max-height: 400px">
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-0">
                  <label class="form-check-label" for="filter-1-0">
                    ITEM 1
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-1">
                  <label class="form-check-label" for="filter-1-1">
                    ITEM 2
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-2">
                  <label class="form-check-label" for="filter-1-2">
                    ITEM 3
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-3">
                  <label class="form-check-label" for="filter-1-3">
                    ITEM 4
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-4">
                  <label class="form-check-label" for="filter-1-4">
                    ITEM 5
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-5">
                  <label class="form-check-label" for="filter-1-5">
                    ITEM 6
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-6">
                  <label class="form-check-label" for="filter-1-6">
                    ITEM 7
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-1-7">
                  <label class="form-check-label" for="filter-1-7">
                    ITEM 8
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-auto">
            <h6 class="dropdown-header">TSC</h6>
            <hr class="mt-0" />
            <div class="overflow-y-auto filter-list" style="max-height: 400px">
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-2-0">
                  <label class="form-check-label" for="filter-2-0">
                    ITEM 1
                  </label>
                </div>
              </div>
              <div class="row align-items-center mx-2">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="filter-2-1">
                  <label class="form-check-label" for="filter-2-1">
                    ITEM 2
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-end mt-4">
          <button type="reset" class="btn btn-sm btn-warning clear-filter">
            Clear Filter
          </button>
          <button type="submit" class="btn btn-sm btn-danger ms-2">
            Submit
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

额外说明 #

• 把col-sm-auto改为col-auto，让列在所有屏幕尺寸下都自动适配内容宽度，若需要小屏幕堆叠效果，可保留col-sm-auto。
• w-auto是核心修改，它打破了dropdown-menu默认的宽度限制，确保内部row能横向展开所有列，完美适配动态生成的列数。

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