html - Bootstrap 4 下拉列表 - 自动宽度调整？

Question

自 Bootstrap 4 auto columns可以适应填充行所需的任何宽度，我想我会用它来填充一个下拉菜单，该菜单可能有 1 或 2 列，具体取决于用户位置。

问题是下拉列表宽度不会扩展以容纳超过 1 列。当我添加第二列时，它只显示在第一列下方，如果我将类从“col”更改为“col-6”，它们并排显示，但列的内容重叠。

为菜单设置一个明确的宽度不是一个选项，因为如果我让它足够宽以容纳 2 列，那么当只显示 1 列时它会变得不必要地宽。

我怎样才能实现一个下拉菜单，使其适应其内容的宽度，并在出现时适应另一列所需的宽度？

问题演示: https://www.bootply.com/VH5uvew6eQ

Answer 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。