Bootstrap で 5 列のレイアウトを作成するにはどうすればよいですか?

Bootstrap 5 Column Layout

この質問では、ユーザーは Bootstrap を使用して 5 列のレイアウトを作成しようとしていますが、問題が発生しています。これを解決するために、さまざまなブートストラップ クラスとグリッド システムを使用したさまざまなアプローチを検討します。

コンテナ クラスと行クラスの使用

ユーザーが提供した最初のコードには、行と行を持つコンテナ クラスが含まれていました。複数のネストされた列。同じ幅の真の 5 列レイアウトを実現するために、Bootstrap 4 で使用される 自動レイアウト グリッド アプローチは、より単純なソリューションを提供します。

Auto-Layout Grid (Bootstrap 4)

コンテナの代わりにcontainer-fluidクラスを使用すると、子要素に自動的に均等な幅を配分する自動レイアウトグリッドを作成できます。行内のネストされた div 要素はコンテナの幅を均等に埋めます。

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

row-cols-5 クラス (Bootstrap 4.4 以降)

Bootstrap 4.4 以降、新しいクラスが追加されました。 row-cols-5 と呼ばれるものが導入されました。このクラスは、行内の 5 列のレイアウトの作成を簡素化します。

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

これらのアプローチを利用することで、Bootstrap を使用して柔軟で応答性の高い 5 列のレイアウトを作成できます。使用している特定のブートストラップ バージョンに基づいてクラスを調整することを忘れないでください。

以上がBootstrap で 5 列のレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。