许多网站设计要求使用包含网站内容的较轻前景页面的深色背景.使用Bootstrap时,似乎合乎逻辑的是,只需将浅色应用于.container div并完成它.但是,Bootstrap的容器不会在其边缘和列之间提供任何填充,因此此解决方案提供了浅色背景,但列内容与边缘齐平 – 不是很好看.
这是一个常见的问题,在stackoverflow和其他地方有一些Bootstrap 2的解决方案,但是我找不到任何对Bootstrap 3有用的东西.
解决方法
其中一个Bootstrap 2解决方案涉及使用.container-fluid,它将内部网格从像素切换到基于百分比.然后,可以将填充应用于.container-fluid中的背景div,并且内部列将无缝地调整以适合.这似乎是一个很好的方法,但用于调整其他一些样式的特定CSS不适用于Bootstrap 3.
在挖掘Bootstrap源代码之后,我注意到.container和.container-fluid规则之间的唯一区别是grid.less是三个媒体查询.我将页面内容包装在.container-fluid中然后用包含媒体查询的内容覆盖其定义,以便页面内容响应与使用标准.container的页眉和页脚相同.
这是HTML：
<html>
<head>
<title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
<div class="page-container">
<div class="container-fluid">
<div class="page-bg">
<!-- PAGE CONTENT -->
</div>
</div>
</div>
</body>
</html>
然后是.less：
.page-container > .container-fluid:first-child {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
然后在.page-container div中添加填充：
.page-container {
.page-bg {
padding: 15px;
background-color: #EFEFEF;
}
}
body {
background-color: #333
}
这似乎有效.我还没有完成驻留在这个容器中的接口的样式,所以可能会出现问题,但到目前为止一切似乎都很好.
Here is a working example of this solution on codepen.io.
请注意,上面的解决方案在包含Bootstrap的变量和mixins .less文件之后使用less.css.这是编译的CSS：
.page-container > .container-fluid:first-child {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.page-container > .container-fluid:first-child {
width: 750px;
}
}
@media (min-width: 992px) {
.page-container > .container-fluid:first-child {
width: 970px;
}
}
@media (min-width: 1200px) {
.page-container > .container-fluid:first-child {
width: 1170px;
}
}
.page-container .page-bg {
padding: 15px;
background-color: #EFEFEF;
}
body {
background-color: #333333;
}
