CSS 如何在不搞乱网格的情况下向 Bootstrap 3 的容器添加填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23833576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one add padding to Bootstrap 3's container without screwing up the grid?
提问by jmcmichael
Many site designs call for a dark background with a lighter foreground page that contains the site's content. When using Bootstrap, it seems logical that one would merely apply the light color to the .container div and be done with it. However, Bootstrap's container does not provide any padding between its edges and the columns within, so this solution provides a light background but with the column content flush with the edges - not a good look.
许多网站设计要求深色背景和包含网站内容的浅色前景页面。使用 Bootstrap 时，只将浅色应用到 .container div 并完成它似乎是合乎逻辑的。但是，Bootstrap 的容器在其边缘和其中的列之间不提供任何填充，因此该解决方案提供了浅色背景，但列内容与边缘齐平 - 看起来不太好。
This is a common problem and there are several solutions on stackoverflow and elsewhere for Bootstrap 2, but I couldn't find anything useful for Bootstrap 3.
这是一个常见问题，对于 Bootstrap 2，stackoverflow 和其他地方有几种解决方案，但我找不到任何对 Bootstrap 3 有用的东西。
回答by jmcmichael
One of the Bootstrap 2 solutions involved using .container-fluid which switches the internal grid from pixel to percentage based. Then one may apply padding to a a background div within .container-fluid and the internal columns will seamlessly adjust to fit. This seemed like a good approach, but the specific CSS used to tweak some of the other styles didn't work with Bootstrap 3.
Bootstrap 2 解决方案之一涉及使用 .container-fluid 将内部网格从像素切换为基于百分比。然后可以将填充应用于 .container-fluid 中的背景 div，内部列将无缝调整以适应。这似乎是一个很好的方法，但是用于调整其他一些样式的特定 CSS 不适用于 Bootstrap 3。
After digging through the Bootstrap source, I noticed that the only difference between the .container and .container-fluid rules, in grid.less are three media queries. I wrapped my page's content in .container-fluid then overrode its definition with one that included the media queries so that the page content would respond the same as the header and footer, which use the standard .container.
在挖掘 Bootstrap 源代码后，我注意到 grid.less 中 .container 和 .container-fluid 规则之间的唯一区别是三个媒体查询。我将页面的内容包装在 .container-fluid 中，然后用包含媒体查询的定义覆盖了它的定义，以便页面内容的响应与使用标准 .container 的页眉和页脚相同。
Here's the HTML:
这是 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>
And then the .less:
然后是 .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;
}
}
Then added padding to the .page-container div:
然后向 .page-container div 添加填充：
.page-container {
.page-bg {
padding: 15px;
background-color: #EFEFEF;
}
}
body {
background-color: #333
}
This seems to work. I haven't completed the styling for the interfaces that will reside within this container yet so there could be issues down the road but everything seems to render fine so far.
这似乎有效。我尚未完成将驻留在此容器中的界面的样式，因此可能会出现问题，但到目前为止一切似乎都呈现良好。
Here is a working example of this solution on codepen.io.
Note that the solution above uses less.css after including Bootstrap's variables and mixins .less files. Here's the compiled CSS:
请注意，上面的解决方案在包含 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;
}
