Что эквивалентно классу bootstrap контейнера в purecss.io? Я использую purecss для своего проекта. Я хочу, чтобы весь мой контент-центр был на моей странице, например, с классом контейнера bootstrap. Я пытался использовать разные вещи, используя сетку purecss, но я не могу понять, как это сделать. Ответ 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; } } Ответ 2 .centered{ margin: 0 auto; width: 80%; } @media screen and (min-width: 480px) { .centered{ margin: 0 auto; width: 95%; } } <div class="centered"> </div>
Ответ 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; } }
Ответ 2 .centered{ margin: 0 auto; width: 80%; } @media screen and (min-width: 480px) { .centered{ margin: 0 auto; width: 95%; } } <div class="centered"> </div>