CSS purecss.io 中容器引导类的等价物是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36229356/
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
What's the equivalent of the container bootstrap class in purecss.io?
提问by BoumTAC
回答by maljukan
Trust only in source young Luke:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
只信任源年轻的卢克：https:
//github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Only after the update of original question i realized you where referring to Pureframework.
只有在更新原始问题之后，我才意识到您在何处指的是Pure框架。
I took a look at the source of the source https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.cssand realized that it adds no sizing on pure-gwhich is a grid wrapper just like containerfrom Bootstrap.
我查看了源https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css的来源，并意识到它没有增加pure-g网格包装器的大小就像container来自Bootstrap 一样。
So, the Pureframework is more generic than Bootstrapand it is perfectly reasonable for you to specify the width of that container by yourself to whatever you want.
因此，Pure框架比Bootstrap更通用，您可以根据需要自行指定该容器的宽度是完全合理的。
Just apply Bootstrapcontainerrules to pure-gclass:
只需将Bootstrapcontainer规则应用于pure-g类：
.pure-g {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.pure-g {
width: 750px;
}
}
@media (min-width: 992px) {
.pure-g {
width: 970px;
}
}
@media (min-width: 1200px) {
.pure-g {
width: 1170px;
}
}
回答by osmanraifgunes
.centered{
margin: 0 auto;
width: 80%;
}
@media screen and (min-width: 480px) {
.centered{
margin: 0 auto;
width: 95%;
}
}
<div class="centered"> </div>
