Was entspricht der Container-Bootstrap-Klasse in purecss.io?

Question

Ich verwende purecss für mein Projekt.

Ich möchte alle meine Inhaltscenter auf meiner Seite wie mit der Bootstrap-Container-Klasse haben.

Ich habe versucht, verschiedene Dinge mit dem purecss-Gitter zu verwenden, aber ich kann nicht herausfinden, wie es geht.

Answer 1

Vertrauen nur in Quelle junger 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; 
    } 
} 

Erst nach der Aktualisierung der ursprünglichen Frage, die Sie mir klar, wo Bezug auf Reines Rahmen.

nahm ich einen Blick auf der Quelle der Quelle https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css und erkennen, dass es die Größe nicht auf pure-g fügt hinzu, die ein Raster-Wrapper von Bootstrap wie container ist.

Also, die reine Rahmen ist allgemeinerer als Bootstrap und es ist durchaus sinnvoll für Sie die Breite des Containers angeben, selbst zu, was Sie wollen.

Wenden Sie einfach Bootstrapcontainer Regeln pure-g Klasse:

.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

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

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

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