www.example.com中容器引导类的等价物是什么purecss.io?

swvgeqrz  于 2023-04-23  发布在  其他
关注(0)|答案(4)|浏览(76)

我的项目使用purecss
我想让我所有的内容中心在我的页面上,就像引导容器类一样。
我尝试使用purecss网格来使用不同的东西,但我不知道如何做到这一点。

qyswt5oh

qyswt5oh1#

只相信年轻的卢克:
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上添加大小调整,pure-g是一个网格 Package 器,就像 Bootstrap 中的container一样。
因此,Pure 框架比 Bootstrap 更通用,您可以自行指定容器的宽度。
只需将 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;
  }
}
mhd8tkvw

mhd8tkvw2#

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;
    }
}
6jjcrrmo

6jjcrrmo3#

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

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

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

ymdaylpp4#

引导容器中的最大宽度

.container {
width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

相关问题