1. ホーム
  2. css

[解決済み] Bootstrapコンテナが複数またはネストされていませんか?

2022-02-10 17:34:33

質問

私の 理解度 は、Bootstrap スタイルの要素はすべて <div class="container"> 要素を使用します。しかし、Bootstrapの例では、複数の"containers"があるのを時々見かけます。

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

私の質問です。

  1. 1つのHTMLページに複数の"container divs"が必要になるのはどんな場合でしょうか?本文全体を1つの大きなコンテナdiv"に入れるのと比べて、どんな利点があるのでしょうか?
  2. コンテナDivを他のDivの中に入れ子にしたいことはありますか?いつ、何のために?

どのように解決するのですか?

  1. ページの一部がビューポートの幅いっぱいに表示され、他の部分は表示されない。背景は全幅になりますが、コンテンツは全幅にならないものもあります。

    たとえば、特集ページでは、背景画像や背景色をビューポートの幅いっぱいに設定していますが、その中のコンテンツ(フォームなど)は、ビューポートの幅を超えないよう .container は、任意のビューポート幅において

  2. ネストしない .container または .container-fluid -- を参照してください。 ドキュメント . 必要ありません。

    Docs: Bootstrapでは、サイトのコンテンツを包むためにcontaining要素が必要です。 とグリッドシステムを格納します。2つのコンテナのうち1つを選択して使用することができます。 を使用します。パディングなどの関係で、どちらも コンテナは入れ子にできません [どちらも .container と .container-fluid は入れ子になってはいけないという意味です]。