html - Bootstrap 最大宽度

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>