尝试在网页上创建一个过滤器,该过滤器利用Bootstrap的下拉菜单并将每个过滤器并排放置在列中,而是现在就把它们堆叠起来。过滤器菜单是通过循环遍历我想创建的项目数组动态创建的,每个项目都是我想放在菜单上的新列。我试图利用网格布局(container〉row〉column),在我的row元素上使用类row-cols-#,但这并不像我想象的那样工作。
我可以使用style
属性强制菜单具有一定的宽度,并使列的位置正确,但是菜单的大小不再基于n列。
我正在使用d-flex,flex-row和flex-column来创建我的侧边栏导航,我想知道这是否会导致一些问题?
下面是一个网页示例,它被简化以进行说明。Filter Menu Help
1条答案
按热度按时间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>
来包含复选框,并便于样式设置。要告诉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 haveposition: relative;
applied to it.和whitespace: nowrap;
用于使每个<label>
与复选框保持一致。最后,为防止
dropdown-menu
在与之交互时关闭,请在<button>
切换器上添加data-bs-auto-close="outside"
。