响应式导航栏引导程序无法在集中页面中工作

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

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

Answer 1

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

最简单的解决方案是使用@media查询在响应式导航栏在auto开始时将#tudo的宽度设置为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