css 下拉菜单-列堆叠在内部

wfypjpf4  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(125)

尝试在网页上创建一个过滤器,该过滤器利用Bootstrap的下拉菜单并将每个过滤器并排放置在列中,而是现在就把它们堆叠起来。过滤器菜单是通过循环遍历我想创建的项目数组动态创建的,每个项目都是我想放在菜单上的新列。我试图利用网格布局(container〉row〉column),在我的row元素上使用类row-cols-#,但这并不像我想象的那样工作。
我可以使用style属性强制菜单具有一定的宽度,并使列的位置正确,但是菜单的大小不再基于n列。
我正在使用d-flex,flex-row和flex-column来创建我的侧边栏导航,我想知道这是否会导致一些问题?
下面是一个网页示例,它被简化以进行说明。Filter Menu Help

5t7ly7z5

5t7ly7z51#

它们堆叠的主要原因是因为您使用的是.col-auto,而默认情况下.row具有flex-wrap: wrap;,因此它将使每列尽可能小并将它们 Package 起来。
第二个原因是dropdown-menu的位置是绝对的,但相对于.dropdown Package 器而言,因为您将 Package 器放在页面的右侧,所以dropdown-menu的宽度不会像您所期望的那样增长。
因此:

  • 不要使用自动列,而是在dropdown-menu上设置max-width
  • 删除<div class="dropdown"></div> Package 。

在小屏幕上,列将使用<div class="row flex-column flex-sm-row">堆叠。每个过滤器列使用一个列表<ul><li>...</li></ul>来包含复选框,并便于样式设置。

<form class="dropdown-menu p-2 mt-1 overflow-auto">
  <div class="container-fluid">
    <div class="row flex-column flex-sm-row">
      <ul class="col list-unstyled">
        <li>
          <h6 class="dropdown-header">Dropdown header</h6>
          <hr class="dropdown-divider">
        </li>
        <li>
          <input class="form-check-input me-1" type="checkbox" value="" id="first">
          <label class="form-check-label stretched-link" for="first">First checkbox</label>
        </li>
        <li>
          <input class="form-check-input me-1" type="checkbox" value="" id="second">
          <label class="form-check-label stretched-link" for="second">Second checkbox</label>
        </li>
        <li>
          <input class="form-check-input me-1" type="checkbox" value="" id="third">
          <label class="form-check-label stretched-link" for="third">Third checkbox</label>
        </li>
      </ul>
      <ul class="col list-unstyled">
        ...
      </ul>
    </div>
    <div class="d-flex justify-content-end gap-3">
      <button type="reset" class="btn btn-sm btn-warning clear-filter">Clear Filter</button>
      <button type="submit" class="btn btn-sm btn-danger">Submit</button>
    </div>
  </div>
</form>

要告诉Flex何时开始换行,在dropdown-menu上设置一个max-width。例如,我将其设置为75vw,但它可以是任何宽度。* 您可以使用row-cols-*代替,但您必须为每个断点添加一个列号。例如.row-cols-1 row-cols-sm-2 row-cols-md-4,而设置max-width更易于维护,并且列的拉伸方式更直观。*
要使stretched-link正常工作,the parent must have position: relative; applied to it.whitespace: nowrap;用于使每个<label>与复选框保持一致。

form {
 max-width: 75vw;
 max-height: 80vh;
}

.col li {
  position: relative;
  white-space: nowrap;
}

最后,为防止dropdown-menu在与之交互时关闭,请在<button>切换器上添加data-bs-auto-close="outside"

相关问题