Я использую purecss для своего проекта.
Я хочу, чтобы весь мой контент-центр был на моей странице, например, с классом контейнера bootstrap.
Я пытался использовать разные вещи, используя сетку purecss, но я не могу понять, как это сделать.
Я использую purecss для своего проекта.
Я хочу, чтобы весь мой контент-центр был на моей странице, например, с классом контейнера bootstrap.
Я пытался использовать разные вещи, используя сетку purecss, но я не могу понять, как это сделать.
Доверяйте только источнику молодого Люка:
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 framework.
Я взглянул на источник источника https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css и понял, что он не добавляет размер pure-g
, который является сеткой обертка, как container
из Bootstrap.
Итак, структура 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;
}
}
.centered{
margin: 0 auto;
width: 80%;
}
@media screen and (min-width: 480px) {
.centered{
margin: 0 auto;
width: 95%;
}
}
<div class="centered"> </div>