引導程序最大寬度

Question

我正在嘗試爲我的網站使用Bootstrap。我想限制大型桌面的最大寬度爲1000px，同時保持響應式佈局。這是我目前的：

body { 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

但是這不適用於導航欄。有沒有辦法將整個頁面限制在這個寬度，包括導航欄？

Answer 1

你可以代替給.container類最大寬度更大的屏幕上和包裝容器

@media (min-width: 1200px) { 
.container { 
    max-width: 1000px; // or better set the width to 1000px 
    } 
} 

這裏面你的導航欄是一個全屏幕demo

牢記.container類型設置爲1000px將影響您的整個網站的寬度，如果您希望僅將.navbar固定爲此大小，則可以創建自定義類並將其僅分配給其父容器。

@media (min-width: 1200px) { 
.customclass { 
    max-width: 1000px!important; 
    } 
} 

<div class="container customclass"> 
    <nav class="navbar navbar-default"> 
    </nav> 
</div>