我正在尝试为我的网站使用Bootstrap。我想限制大型桌面的最大宽度为1000px,同时保持响应式布局。这是我目前的:引导程序最大宽度
body {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
但是这不适用于导航栏。有没有办法将整个页面限制在这个宽度,包括导航栏?
我正在尝试为我的网站使用Bootstrap。我想限制大型桌面的最大宽度为1000px,同时保持响应式布局。这是我目前的:引导程序最大宽度
body {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
但是这不适用于导航栏。有没有办法将整个页面限制在这个宽度,包括导航栏?
你可以代替给.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>
尝试通过设置此规则'width:1000px;'到navbar(也许'.navbar {width:1000px;}'做到这一点)。 – Lucio