html - Bootstrap 下拉菜单绝对定位

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;
}

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