purecss.ioのコンテナブートストラップクラスに相当するものは何ですか？

Question

私のプロジェクトにはpurecssが使用されています。

ブートストラップコンテナクラスのように私のページにすべてのコンテンツセンターを配置したいと考えています。

私はpurecssグリッドを使って別のものを使用しようとしましたが、それを行う方法を理解できません。唯一のソース若いルーク

Answer 1

トラスト：ピュアフレームワークを参照する場所

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

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

のみ元の質問を更新した後、私はあなたを実現。

私はソースhttps://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.cssのソースを見ていたし、それだけでブートストラップからcontainerのようなグリッド・ラッパーであるpure-gに何のサイズを追加していないことに気づきました。

ので、ピュアフレームワークは、ブートストラップより汎用的であり、あなたがあなたが望むものは何でも自分でそのコンテナの幅を指定することは完全に合理的です。

だけpure-gクラスへブートストラップcontainerルール適用されます。

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