Qual è l'equivalente della classe bootstrap del contenitore in purecss.io?

Question

Sto usando purecss per il mio progetto.

Voglio avere tutto il mio contenuto center sulla mia pagina come con la classe del contenitore di bootstrap.

Ho provato a utilizzare cose diverse usando la griglia purecss ma non riesco a capire come farlo.

Answer 1

fiducia solo nella fonte giovane Luca:
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; 
    } 
} 

Solo dopo l'aggiornamento domanda originale che si realizza in cui riferendosi al quadro Pure.

ho preso uno sguardo alla fonte della sorgente https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css e si rese conto che non aggiunge dimensionamento su pure-g che è un wrapper griglia proprio come container da Bootstrap.

Così, il Pure quadro è più generico di Bootstrap ed è perfettamente ragionevole per di specificare la larghezza di quel contenitore da soli per quello che vuoi.

Basta applicare Bootstrapcontainer regole per 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; 
    } 
} 

Answer 2

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

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

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