html - Bootstrap 导航的 Css 页脚问题

Question

我正在使用 bootstrap 重新创建我的布局，因为我希望我的网站能够响应。我现在的布局是这样的:

<div id="container">
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

这是容器和页脚的 css 代码:

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

div#content{
padding: 0 0 4em; /* Footer height padding */
}

div#footer{
bottom: 0;
position:absolute;
z-index:0;
background:#000000;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

但是我遇到了一个问题(你可以看到当前的代码 + 正确的设置 here ):调整页面大小后，页脚就在页眉下方(它位于内容区域文本的顶部，我需要在其中放置正确的填充)。之后单击菜单图标(在移动 View 中)，页脚位于菜单顶部，这不是故意的。

就像这样:

应该发生的是菜单位于页脚上方。

我尝试用 z-index:-20 修复它；但后来我无法再单击页脚中的链接...因此该解决方案将不起作用。

你能帮帮我吗？

Answer 1

您应该将 z-index 添加到您的导航栏，如下所示:

.navbar {
  ...
  z-index: 1;
}