引导下拉菜单 - 多列并排

Question

尝试在网页上创建一个过滤器，利用 Bootstrap 的下拉菜单并将各列并排放置，但它现在将它们堆叠起来。过滤器菜单是通过循环遍历我想要创建的项目数组来动态创建的。每个项目都是我想放在菜单上的一个新列。我试图在行元素上使用网格布局 (

container > row > column

) 和类

row-cols-#

，但这并不像我想象的那样工作。

我可以强制我的菜单具有一定的宽度并使列位置正确，但随后我的菜单在所有过滤器菜单上都被硬编码为一定的宽度，而不管列数有多少。这是我的 HTML 代码示例，它创建了一个相当大的菜单。

想知道最后的

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" style="">
      <form action="/ajax/page_filter/" method="GET" class="filter">
        <div class="container">
          <div class="row">
            <div class="col-sm-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/>
                    <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/>
                    <label class="form-check-label" for="filter-0-1">
                      ITEM 2
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-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/>
                    <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/>
                    <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/>
                    <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/>
                    <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/>
                    <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/>
                    <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/>
                    <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/>
                    <label class="form-check-label" for="filter-1-7">
                      ITEM 8
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-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/>
                    <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/>
                    <label class="form-check-label" for="filter-2-1">
                      ITEM 2
                    </label>
                  </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>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

更新

我已在此处包含我当前的示例过滤器菜单帮助

Answer 1

我一直在努力解决如何让我的用户界面快速填写大量信息到表单中，这些信息来自不同的数据表，我必须构建一个大的旧估计类型屏幕。

你的想法让我想到也许只是有一个像你这样的大列表，让他们只选择他们想要的行。 然后从复选框构建它。

谢谢