Question

我在项目中使用purecss。

我希望将所有内容集中在我的页面上，就像使用bootstrap容器类一样。

我尝试使用purecss网格使用不同的东西，但我无法弄清楚如何做到这一点。

Answer 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 更通用，您可以根据自己的需要自行指定容器的宽度。

只需将 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;
  }
}

Answer 2

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

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

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

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

2 个答案: