Html 非固定引导3.0头文件

注意：请以全屏模式查看。下面，我指的下拉列表是导航菜单中标记为“dropdown”的li项。单击时，下拉列表的宽度为100%，具体取决于屏幕大小

尝试完成：

使用Bootstrap 3.0默认模板的全屏宽度（100%）下拉列表

问题：

我已将.dropdown菜单位置设置为固定位置，宽度为100%，从而允许默认bootstrap 3.0主题中的下拉菜单根据屏幕大小设置为100%。（见小提琴）

在启用下拉菜单的情况下向下滚动页面，菜单将被破坏，因为在滚动时它固定在屏幕顶部。我该如何给boostrap 3下拉框100%的宽度，而不破坏下拉框（如我的小提琴所示）

**

---

这些是我用来覆盖默认引导3下拉列表的覆盖。如何使100%宽度下拉菜单与主导航条保持一致？

使用

位置：绝对
。但为了使其正常工作，您必须覆盖父级
li
上引导的
位置：relative

.dropdown-menu{
    position: absolute;
    top: 51px !important;  
    left: 0;
    width: 100%;
    z-index: 1000;
}
.nav > .dropdown {
    display: block;
    position: static !important; /* !important is likely only needed in the fiddle */
}

正在为我工作。
请确保在适当的媒体查询（以及原始CSS）中包装这些覆盖。这样做将帮助您管理不同断点的属性。
.dropdown-menu{
    position: absolute;
    top: 51px !important;  
    left: 0;
    width: 100%;
    z-index: 1000;
}
.nav > .dropdown {
    display: block;
    position: static !important; /* !important is likely only needed in the fiddle */
}