由于Bootstrap 4自动列可以适应填充行所需的任何宽度，因此我想用它来填充一个下拉菜单，该菜单可能有1或2列，具体取决于用户位置。
问题是下拉宽度无法扩展以容纳超过1列。当我添加第二列时，它仅显示在第一列下，并且如果将类从“ col”更改为“ col-6”，它们将并排显示，但是列的内容重叠。
为菜单设置显式宽度不是一种选择，因为如果我将其宽度设置为足以容纳2列，则当仅显示1列时，它将不必要地变宽。
如何获得一个下拉菜单，使其适应其内容的宽度以及出现时另一列所需的宽度？
问题的演示：https : //www.bootply.com/VH5uvew6eQ
整个Bootstrap网格系统基于以下想法：a的父级.row具有确定的宽度（通常由a.container或a提供.container-fluid），并.row可以帮助您划分该宽度width。
它旨在限制/伸展列的内容，而不是容纳auto其列的宽度，以便为布局提供一定的顺序感。实际上，v4比以前的版本更灵活，因为它允许您以一定的灵活性来划分空间（使用flexbox），但仍在其提供的大小范围内。
如果不需要，请不要对特定元素使用网格系统。仅在有意义的地方使用它。
在你的情况下，添加一个double类你想放大的下拉菜单，并覆盖自举的.dropdown-menu: min-width: 10rem用自己的
.dropdown-menu.double { min-width: 20rem; }
也许将no-gutters类添加到您的rows中可能是朝着您的目标迈出的一步。
请注意你的布局有多个重复的ID这是无效的HTML。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句