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

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

但是当我复制代码以进行响应时，布局不起作用->在这里

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