Center (コンテナ)

Center: クラス名 .container のコンテナ。コンテナの幅は画面デバイスごとに異なります。コンテナの両側に空白があります。
各サイズの中心の幅は次のとおりです:

画面デバイス	中心の幅
max-width:768px	xsは親要素の幅を継承します(つまり、width:100%)
最小幅:768px	sm 750px
最小幅:992px	md 970px
最小幅:1200px	lg 1170px

りー

画面の幅に関係なく、container.container にはコンテンツがブラウザの端に直接触れないように、常に左右に 15 ピクセルのパディングが含まれます。コンテナー内に別のコンテナーをネストしないでください。container-fluid のコンテナーは、768px より小さい画面のコンテナーと同じであり、その親要素の幅を継承します。
.container コンテナは、レスポンシブな幅に幅の制約を与えるために使用されます。サイズの変更に応じて、コンテナーは実際にはパーセンテージに基づいて変更されるため、変更を加える必要はありません。

Row: クラス名 .row のコンテナーで、列 (col) 用の合計スペースがあり、合計 12 列に分割されます。

コンテナの両側のパディング値をオフセットするために、行の両端に 2 つの負の 15px マージン値が存在します。 .row はコンテナ外で使用すると無効になります。

.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;
  }}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

ログイン後にコピー

Column

各列の両側に 15px のパディング値があります。 .row コンテナの外では決して Col を使用しないでください。そうしないと、col が無効になります。

各列のパディング値は、コンテンツがブラウザの端にくっついたり、列がくっついたりしないように、コンテンツに隙間を設けます。
==列はパーセンテージに従って割り当てられます (ページの中央の幅のパーセンテージを基準とするため、ページの中央が広いほど、各列の幅も大きくなります)==。

.row {
    margin-right: -15px;
    margin-left: -15px;
}

ログイン後にコピー

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为：.col-sm-1
//       大屏幕   类名为：.col-lg-1
@media (min-width:768px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width:1200px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
}

ログイン後にコピー

コンテナ/行/列を設定したら、列に新しいグリッドシステムを作成し、列に直接行を追加するだけです。コンテナを設定する必要はありません。列の両側のパディング値は行の両側の負のマージン値を正確にオフセットでき、列はコンテナと同等であるためです。

オフセット