引导程序最大宽度

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>