Bootstrap下拉菜单绝对定位

Question

我在Bootstrap中制作了垂直下拉菜单。除了一个问题，一切都很好。整个子菜单使用“fixed”属性定位，当页面有更多内容时，整个子菜单会随着页面滚动。

这里有一个示例：Bootply 有没有可能修复它？

- Adrian

---

你想要相同的对齐方式还是左对齐可以？这是水平菜单吗？ - Suresh Ponnukalai

同样的对齐方式，但使用绝对定位而不是固定定位，并且是横向菜单。 - Adrian

Answer 1

问题在于下拉菜单之前的所有元素都被定位为 relative，这使得将宽度绝对定位为 body 宽度的 100% 变得困难（更多信息请阅读）。如果您不想使用 JavaScript 解决方案，那么通过对标记和 CSS 进行一些更改（从 li.inline-list 中删除 container 类，删除 col-sm-3，将 col-sm-9 更改为 'col-sm-12'，将 nav 链接定位在中心，并使用 container-fluid 而不是 container 来包裹它们），我设计了这个 Bootply 。请观察我添加的 CSS。

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

虽然我能够将子菜单调整到几乎完整的长度，但是container-fluid和col-x-x都会在两侧留下15像素的填充，因此我不得不给左侧添加-30像素的位置，并使用calc增加60像素的宽度。 Calc仅受IE9+支持。

- vabhdman

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

这将使其保持不动。

- Izekid

---

是的，但整个子菜单都会向右移动。http://www.bootply.com/SOuqNBvgBB - Adrian

那么，您想让Link 1.1等出现在下拉菜单中，还是希望它在侧边栏上显示？ - Izekid

子菜单应该和现在一模一样，但是它应该随着页面滚动而滚动，而不是停留在一个位置。 - Adrian

我认为解决方案将是您必须在链接上手动设置位置，例如top: right: left:等。 - Izekid