響應式導航欄引導程序無法在集中頁面中工作

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