Question

我在bootstrap中创建了垂直下拉菜单。除了一件事，一切都很好。整个子菜单使用fixed属性定位，当页面内容更多时，整个子菜单会滚动页面。

这里有例子：Bootply

是否可以修复它？

Answer 1

问题是该下拉列表中的所有元素都位于relative，这使得宽度的绝对位置难以达到主体宽度的100％（read more）。如果您不是在寻找JavaScript解决方案而不是对标记和CSS进行一些更改（从li.inline-list删除容器类），请删除col-sm-3，将col-sm-9更改为'col-sm} -12'，在中心设置导航链接并使用container-fluid代替container来包装它们）我想出了这个Bootply。观察我添加的CSS

.top-main .dropdown-menu {
width: calc(100% + 60px);
position: absolute;
left: -30px;
}

即使我可以让子菜单几乎全长，conainer-fluid和col-x-x都会在两侧留下15px填充，所以我必须向左边放-30px位置并添加60px到宽度使用calc。 Calc仅受IE9 +支持。

Answer 2

改变你的css，

 .top-main .dropdown-menu {
    width: 100%;
    position: absolute;
    top: 87px;
    z-index: 1000;
    text-align: right;
    padding: 5px 0;
    margin: 0 auto;
    }

这将使它保持

Bootstrap下拉菜单绝对定位

2 个答案: