由于Bootstrap 4 auto columns可以适应填充行所需的任何宽度，因此我认为我将使用它来填充一个下拉菜单，该菜单可能有1或2列，具体取决于用户位置。
问题是下拉宽度无法扩展以容纳超过1列。当我添加第二列时，它仅显示在第一列下，并且如果将类从“ col”更改为“ col-6”，它们将并排显示，但是列的内容重叠。
为菜单设置显式宽度不是一种选择，因为如果我将其宽度设置为足以容纳2列，则当仅显示1列时，它将不必要地变宽。
如何获得一个下拉菜单，使其适应其内容的宽度以及出现时另一列所需的宽度？
答案 0 :(得分：1)
整个Bootstrap网格系统基于这样一个思想，即.row的父级具有确定的宽度（通常由.container或.container-fluid提供）和.row帮助您划分width。
它被设计为约束/伸展列的内容，而不是容纳其列的auto宽度，以便为布局提供某种顺序感。实际上，v4比以前的版本更灵活，因为它允许您以一定的灵活性（使用flexbox）划分空间，但仍在其提供的大小范围内。
如果不需要，请不要对特定元素使用网格系统。仅在有意义的地方使用它。
在您的情况下，将double类添加到要放大的下拉列表中，并使用自己的覆盖Bootstrap的.dropdown-menu: min-width: 10rem
.dropdown-menu.double { min-width: 20rem; }
也许向您的no-gutters添加row类可能是a step forward朝您的目标迈进。
要做 ，请注意，您的布局中有多个重复的ID，它们是无效的HTML。