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

ブートストラップ - 5 列レイアウトの作成

ブートストラップでは、次のメソッドを使用して全幅 5 列のレイアウトを作成できます。

オプション 1: 自動レイアウト グリッド (ブートストラップ 4)

ブートストラップ 4 の場合、自動レイアウト グリッドを利用して、同じ幅の全幅の列を 5 つ作成します:

<code class="html"><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></code>

オプション 2: Clearfix ブレーク (ブートストラップ 4)

同じ行内の列を折り返すには、5 列ごとに Clearfix ブレークを挿入します。

<code class="html"><div class="container">
    <div class="row">
        <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-12"></div> <!-- Clearfix break -->
        <div class="col">X</div>
    </div>
</div></code>

オプション 3: row-cols-5クラス (ブートストラップ 4.4 )

ブートストラップ バージョン 4.4 以降の場合は、行要素で row-cols-5 クラスを使用します:

<code class="html"><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></code>

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