解释

引导程序的.dropdown-menu类的adds position: absolute。As you may know，则所有绝对定位的元素都相对于它们使用position: relative找到的第一个父元素进行定位。在Bootstrap中，这由.dropdown wrapper提供

因此，如果您希望相对于容器而不是nav项定位元素，则必须从.dropdown包装器执行remove relative positioning操作。您可以通过将该值重置为static的initial value for the position property来完成此操作。

祝贺你!菜单不再受.dropdown元素的限制，但我们仍有一些工作要做。

因为bootstrap并不打算限制菜单的空间，所以菜单项被赋予了white-space: nowrap属性，以便它们可以根据需要扩展。考虑堆栈溢出时代码块内部的代码行(1行=1行)。既然我们希望这条线最终结束，这是行不通的。因此，我们将把锚标记重新设置为white-space: normal。

此时，.dropdown-menu应该占据.navbar的全部大小(它本身占据.container的全部大小)。这就是yamm3正在做一些非常酷的事情的地方。It sets left: auto on the dropdown-menu。

根据MDN on the left property的说法

auto

是一个表示以下内容的关键字：

对于绝对定位的元素，根据right属性确定元素的位置，并将width: auto视为基于内容的宽度。

因此，将.dropdown-menu设置为left:auto将导致菜单从其当前位置开始，并一直延伸到容器的右侧。

就是代码

只需将.fill-width类添加到您的.dropdown元素中，并包含以下CSS：

Working Demo in jsFiddle

​

​

​

​