web-dev-qa-db-fra.com

Quel est l'équivalent du conteneur bootstrap class in purecss.io?

J'utilise purecss pour mon projet.

Je veux avoir tout mon centre de contenu sur ma page comme avec la classe de conteneur bootstrap.

J'ai essayé d'utiliser différentes choses en utilisant la grille de purecss mais je ne sais pas comment le faire.

csstwitter-bootstrapyui-pure-css
19
BoumTAC

Ne vous fiez qu'à la source du jeune Luke:
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;
  }
}

Ce n'est qu'après la mise à jour de la question d'origine que j'ai réalisé que vous faisiez référence au cadre Pure .

J'ai jeté un coup d'œil à la source de la source https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css et j'ai réalisé qu'elle n'ajoutait pas de dimensionnement sur pure-g qui est un wrapper de grille comme container de Bootstrap .

Ainsi, le cadre Pure est plus générique que Bootstrap et il est parfaitement raisonnable pour vous de spécifier la largeur de ce conteneur par vous-même à ce que vous voulez.

Il suffit d'appliquer Bootstrap container règles à pure-g classe:

.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;
  }
}
47
maljukan
.centered{
  margin: 0 auto;
  width: 80%;
}

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

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