Bootstrap 4 で 5 列のレイアウトを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-26 01:39:02

オリジナル

304 人が閲覧しました

How to create a 5-column layout in Bootstrap 4?

Bootstrap - 5 列レイアウト

Bootstrap を使用して 5 列の全幅レイアウトを実現したいと考えていますが、解決策が見つかりません

Bootstrap 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>

ログイン後にコピー

Bootstrap 4 はフレックスボックスを使用するため、このソリューションは機能します。同じ行内で列を折り返すには、

などの clearfix ブレークを使用します。または

5 列ごと。

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