Что эквивалентно классу начальной загрузки контейнера в purecss.io?

Question

Я использую purecss для своего проекта.

Я хочу, чтобы весь мой контент-центр был на моей странице, как в классе контейнера начальной загрузки.

Я пытался использовать разные вещи с использованием сетки 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 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;
  }
}

Answer 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;
    }
}

Answer 3

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

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

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

Answer 4

максимальная ширина в загрузочном контейнере

      .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;
  }
}