Question

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

尝试完成：

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

问题：

我已将.dropdown菜单位置设置为固定位置，宽度为100％，因此默认bootstrap 3.0主题中的下拉列表取决于屏幕大小为100％。（见小提琴）。

在启用了下拉列表的情况下向下滚动页面，菜单被破坏，因为滚动时它固定在屏幕顶部。如何在不打破下拉列表的情况下给予boostrap 3下拉宽度100％（如我的小提琴所见）。

**

.dropdown-menu{
    position: fixed !important;
    top: 51px !important;    
    width: 100%;
    z-index: 1000;
}

这些是我用来覆盖默认bootstrap 3下拉列表的覆盖。如何使用父导航栏获得100％宽度下拉棒？

Answer 1

使用position: absolute。但为了使其正常工作，您必须覆盖父position: relative上的bootstrap li。

.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 */
}

http://jsfiddle.net/y2q52/3/正在为我工作。

不固定Bootstrap 3.0标头

1 个答案: