purecss.io 中的容器引导类的等价物是什么？答案

【问题标题】：What's the equivalent of the container bootstrap class in purecss.io?purecss.io 中的容器引导类的等价物是什么？
【发布时间】：2021-01-15 10:01:11
【问题描述】：

我在我的项目中使用purecss。

我希望我的页面上的所有内容中心都像引导容器类一样。

我尝试使用 purecss 网格使用不同的东西，但我不知道该怎么做。

【问题讨论】：

标签： css twitter-bootstrap yui-pure-css

【解决方案1】：

只相信源年轻的卢克：
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;
  }
}

只有在更新原始问题后，我才意识到您指的是 Pure 框架。

我查看了源代码 https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css 的源代码，发现它没有在 pure-g 上添加大小，这是一个网格包装器，就像 Bootstrap 中的 container。

因此，Pure 框架比 Bootstrap 框架更通用，您可以自行指定容器的宽度以任意调整。 p>

只需将 Bootstrap container 规则应用于 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;
  }
}

【讨论】：

第一块，正是我想要的！谢谢

【解决方案2】：

container 值关注Boostrap 4.4,
https://getbootstrap.com/docs/4.4/layout/overview/

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
} 
@media (min-width: 576px) {
    .container {
        width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

【讨论】：

【解决方案3】：

.centered{
  margin: 0 auto;
  width: 80%;
}

@media screen and (min-width: 480px) {
    .centered{
          margin: 0 auto;
          width: 95%;
        }
 }

 <div class="centered"> </div>

【讨论】：