响应式导航栏引导程序在集中页面中不起作用

Question

我在使用响应式导航栏时遇到了一点问题。我有两个 div 来集中我的页面。

<div id="tudo">
    <div id="conteudo">
        <!--My content here-->
    </div>
</div>

还有css：

#tudo
{
    width: 876px;
    margin: 0 auto;
    text-align: left; /*hack for IE*/
}
#conteudo
{
    padding: 5px;
}

但是当我复制响应式代码时，布局不起作用 -> Here

Answer 1

问题是您的 CSS 将 #tudo 设置为 876px 的固定宽度，这不允许导航栏响应。

最简单的解决方案是使用@media 查询将#tudo 的宽度设置为auto，当响应式导航栏在979px 启动时

#tudo
{
    width: 876px;
    margin: 0 auto;
    text-align: left; /*hack for IE*/
    overflow:hidden;
}
#conteudo
{
    padding: 5px;
    overflow:hidden;
}

@media (max-width: 979px) {

  #tudo {
      width: auto; 
    margin: 0;
  }
  #conteudo {
      width: auto;
  }

}

Demo on Bootply