我的项目使用purecss。我想让我所有的内容中心在我的页面上,就像引导容器类一样。我尝试使用purecss网格来使用不同的东西,但我不知道如何做到这一点。
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
container
.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; } }
mhd8tkvw2#
container值跟随Boostrap 4.4,https://getbootstrap.com/docs/4.4/layout/overview/
Boostrap 4.4
.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; } }
6jjcrrmo3#
.centered{ margin: 0 auto; width: 80%; } @media screen and (min-width: 480px) { .centered{ margin: 0 auto; width: 95%; } } <div class="centered"> </div>
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; } }
4条答案
按热度按时间qyswt5oh1#
只相信年轻的卢克:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
只有在原始问题更新后,我才意识到你指的是 Pure 框架。
我看了一下源代码https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css的源代码,发现它没有在
pure-g
上添加大小调整,pure-g
是一个网格 Package 器,就像 Bootstrap 中的container
一样。因此,Pure 框架比 Bootstrap 更通用,您可以自行指定容器的宽度。
只需将 Bootstrap
container
规则应用于pure-g
类:mhd8tkvw2#
container
值跟随Boostrap 4.4
,https://getbootstrap.com/docs/4.4/layout/overview/
6jjcrrmo3#
ymdaylpp4#
引导容器中的最大宽度