自 Bootstrap 4 auto columns可以适应填充行所需的任何宽度,我想我会用它来填充一个下拉菜单,该菜单可能有 1 或 2 列,具体取决于用户位置。
问题是下拉列表宽度不会扩展以容纳超过 1 列。当我添加第二列时,它只显示在第一列下方,如果我将类从“col”更改为“col-6”,它们并排显示,但列的内容重叠。
为菜单设置一个明确的宽度不是一个选项,因为如果我让它足够宽以容纳 2 列,那么当只显示 1 列时它会变得不必要地宽。
我怎样才能实现一个下拉菜单,使其适应其内容的宽度,并在出现时适应另一列所需的宽度?
最佳答案
整个 Bootstrap 网格系统基于这样的想法,即 .row
的父级具有确定的宽度(通常由 .container
或 提供。 container-fluid
) 和 .row
可帮助您划分宽度
。
它旨在限制/拉伸(stretch)列内容,而不是适应其列的 auto
宽度,因此它为您的布局提供了某种秩序感。事实上,v4 比以前的版本更灵活,因为它允许您以一定的灵 active (使用 flexbox)划分空间,但仍然在其提供的大小范围内。
如果您不需要,请不要为您的特定元素使用网格系统。只在有意义的地方使用它。
在您的情况下,将 double
类添加到您想要放大的下拉列表中,并用您自己的
.dropdown-menu.double { min-width: 20rem; }
也许将 no-gutters
类添加到您的 row
可能是 a step forward朝着你的目标前进。
请注意您的布局有多个重复的 id,它们是无效的 HTML。
关于html - Bootstrap 4 下拉列表 - 自动宽度调整?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55130548/