コンテンツ

.container-sm.container-md.container-lg演练

ガイド：大画面のケースについては、 YYDatavの大画面データの視覚化「Summaryof Wonderful Cases」（PythonとEchartsのソースコード）-YYDataVのブログ-CSDNブログを参照してください。

コンテナコンテナは、Bootstrapの最も基本的なレイアウト要素です。コンテナはネストできますが、ほとんどのレイアウトではネストされたコンテナは必要ありません。

Bootstrapには3種類のコンテナがあります

レスポンシブブレークポイントごとに最大幅を設定する.container。

.container-fluid、すべてのブレークポイントで、幅は100％です。

.container- {ブレークポイント}、指定されたブレークポイントまで100％の幅。

次の表は、.containerと.container- .container-fluid 以及{ブレークポイント}の比較を示しています宽度width。

実際の戦闘

ディスプレイの解像度は1920*1080です

この解像度はLarge>=992pxシリーズに属しているため、表示効果は次のようになります。

コード

<body>
    <div class="container" style="border:3px solid blue">
        hello
    </div>
</body>

レンダリング

divレイアウトの左側と右側に空白があることがわかります。

コード

<body>
    <div class="container-fluid" style="border:3px solid blue">
        hello
    </div>
</body>

レンダリング

divレイアウトがビューポートの100％を占めていることがわかります。

コード

<body>
    <div class="container-sm" style="border:3px solid blue">
        hello
    </div>
</body>

レンダリング

divレイアウトの左側と右側に空白があることがわかります。.containerと同じ効果

コード

<body>
    <div class="container-xl" style="border:3px solid blue">
        hello
    </div>
</body>

レンダリング

divレイアウトがビューポートの100％を占めていることがわかります。.container-fluidと同じ効果

上に示したように、Bootstrapは一連の事前定義されたコンテナクラスを生成して、目的のレイアウトを構築するのに役立ちます。Sassマッピング（variables.scssにあります）を変更することで、これらの事前定義されたコンテナークラスをカスタマイズできます。

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

大画面デザインの視覚化-総合カタログ