引导程序导航的Css页脚问题

Question

我正在使用引导程序重新创建我的布局，因为我希望我的网站能够响应。 我现在有这样的布局：

<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）： 一旦我调整页面大小，就像页脚正好在页眉下面（它在内容区域文本的顶部，我需要在其中放置正确的填充）。之后点击菜单图标（在移动视图中），页脚位于菜单的顶部，这并非如此。

就像这样：

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

我尝试用z-index修复它：-20;但是我不能再点击页脚中的链接......所以这个解决方案不会起作用。

你能帮助我吗？

Answer 1

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

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

Answer 2

div#footer页脚给z-index=-1，你会得到

Answer 3

解决此问题：

1. 最好在单独的容器中使用（标题，内容，页脚）。
2. 在style.css文件的第（42）行中，您的代码应如下所示：

的更新 的

新代码并至少在单独的容器中创建页脚。

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

希望这会对你有所帮助。

Answer 4

回答：MichaB

解决方案是添加z-index：1;到导航栏。这解决了这个问题。