Html Bootstrap 4下拉菜单-自动调整宽度大小？

因为它可以适应填充行所需的任何宽度，所以我想我应该使用它来填充一个下拉菜单，根据用户位置的不同，下拉菜单可能有1列或2列

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

设置菜单的显式宽度不是一个选项，因为如果我将其宽度设置为足以容纳2列，那么当仅显示1列时，它将不必要地宽

我如何才能实现一个下拉菜单，使其适应其内容的宽度，以及出现另一列时所需的宽度

问题演示：

---

整个引导网格系统是基于这样一个想法预测的：

.row

的父级具有确定的宽度（通常由

.container

或

.container fluid

提供），并且

.row

帮助您划分

宽度

它旨在约束/拉伸列内容，而不是容纳其列的
auto
宽度，以便为布局提供某种秩序感。实际上，v4比以前的版本更灵活，因为它允许您以一定的灵活性（使用flexbox）划分空间，但仍然在其提供的大小范围内

如果不需要，请不要对特定元素使用网格系统。只在有意义的地方使用它

在您的情况下，将一个
double
类添加到要放大的下拉列表中，并覆盖引导的
。下拉菜单：最小宽度：10rem

.dropdown-menu.double { min-width: 20rem; }

也许将
no-gutters
类添加到
行中
s可能会达到您的目标

请注意，您的布局中有多个重复的ID，这些ID是无效的HTML。
感谢您澄清了有关行、容器和宽度的网格规则，现在看起来很明显。