Bootstrap 下拉重叠容器 div，而不是将其向下推

Question

我最近开始使用 Twitter Bootstrap，我发现它非常直观，除了一件事。

我目前正在构建一个.sliderwrap包含图像的包装器（类）的站点，该图像最终将被图像滑块替换。图像/滑块具有h1绝对定位的叠加文本。

在较小的屏幕宽度上，我的导航菜单变成了一个下拉菜单。当下拉菜单打开时，它会将 内的图像向下推.sliderwrap，但会与.sliderwrap自身和绝对定位的文本重叠，而不是将其向下推。这显然会破坏h1文本，我想将其与图像一起沿着页面向下移动。

如何让下拉菜单.sliderwrap向下推而不是重叠其中的一部分？

这是我遇到问题的页面。（请原谅下拉菜单本身的样式，它远未完成！）

Answer 1

我认为最简单的解决方案是您需要清除主菜单和辅助菜单中的浮动。

如您所见，您有：

<div class="navbar navbar-static-top">...</div>

而且你还有：

<div class="secondmenu">...</div>

清除这些的最简单方法是将它们放入类.row或.row-fluid. 我还建议您养成在代码中添加行的习惯，以便让这些事情变得清晰。

您的代码最终应如下所示：

<div class="row">
  <div class="navbar navbar-static-top">...</div>
  <div class="secondmenu">...</div>
</div>

最后但并非最不重要的...您的文本并不是绝对相对于滑块 div 定位的，而是相对于浏览器镶边定位的，因此您需要使滑块容器具有一个position: relative设置为该容器内的任何元素position: absolute（在本例中是您的h1) 将根据其父容器进行绝对定位。

因此，也在您的样式中设置它：

.sliderwrap {
  position: relative;
}

这几乎修复了您的双菜单，因此它清除了滑块和文本。让我知道这是否适合您，如果您需要对答案进行任何澄清，请不要忘记投票或接受答案（如果有效）！干杯。