Question

我正在尝试使用Bootstrap来访问我的网站。我想在保持响应式布局的同时，将大型桌面的最大宽度限制为1000px。这就是我目前所拥有的：

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

但这对navbar不起作用。有没有办法将整个页面限制为此宽度，包括导航栏？

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>

Bootstrap最大宽度

1 个答案: