由于您使用的是 Twitter Bootstrap 3,因此您可以从http://getbootstrap.com/主页的 zip 文件的示例文件夹中的“粘性页脚导航栏”模板开始。
摆脱粘性导航栏:打开 index.html 并转到第 31 行,它有这个:
<div class="navbar navbar-default navbar-fixed-top">
只需从类属性中删除 navbar-fixed-top 即可。
使容器宽 600 像素:创建自己的 css 文件,将其包含在 index.html 的 HEAD 部分中并添加到那里
#wrap > .container {
width: 600px;
}
您还需要添加媒体查询以覆盖较小的视口大小的基本 tb3 样式,并在那里添加 600px。所以在那个类型之下:
@media (max-width: 1199px) {
#wrap > .container {
width: 600px;
}
}
@media (max-width: 991px) {
#wrap > .container {
width: 600px;
}
}
@media (max-width: 767px) {
#wrap > .container {
width: 100%;
}
}
@media (max-width: 480px) {
#wrap > .container {
width: 100%;
}
}
那些 100% 的宽度是存在的,因为如果您强制页面的宽度低于该宽度 600 像素,您将失去网站的响应宽度。
最后一部分,垂直居中。你确定你需要它吗?页面上会有多少信息?变化很大吗?例如,当您使用移动设备查看网站时会发生什么?您可以使用 HTML 和 CSS 来实现它,只需添加几个 div 和一些 css。
在 index.html 文件中像这样包装容器 div:
<div class="outercontainer">
<div class="middlecontainer">
<div class="container">
Content
</div>
</div>
</div>
并将 CSS 的 #wrap > .container 部分更改为:
.outercontainer {
display: table;
height: 100%;
position: absolute;
width: 100%;
}
.middlecontainer {
display: table-cell;
padding: 65px 0; /*For your header and footer*/
vertical-align: middle;
}
.container {
height: auto;
margin: 0 auto;
max-width: 600px;
position: relative;
}
这是垂直居中的 Codepen:http ://codepen.io/anon/pen/Gposw
您可能需要进行一些调整才能使其按您想要的方式工作,但使用这些可以为您提供良好的开端。