web-dev-qa-db-ja.com

コンテナbootstrap purecss.ioのクラスに相当するものは何ですか？

私はプロジェクトに purecss を使用しています。

bootstrapコンテナクラスのように、すべてのコンテンツセンターをページに配置します。

Purecssグリッドを使用してさまざまなものを使用しようとしましたが、その方法がわかりません。

csstwitter-bootstrapyui-pure-css
19
BoumTAC

ソースの若いルークのみを信頼する：
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フレームワークを参照していることに気付きました。

ソースのソースを確認しました https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.cssBootstrapからのcontainerのようなグリッドラッパーであるpure-gのサイズ設定。

したがって、PureフレームワークはBootstrapよりも一般的であり、完全にそのコンテナの幅を自分で好きなように指定するのが合理的です。

Bootstrapcontainerルールを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;
  }
}
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