Bootstrap 4 で 5 列のレイアウトを作成するには?

Bootstrap 4、5 列レイアウトの作成方法

Bootstrap で 5 列レイアウトを作成するのは難しい場合がありますが、いくつかの簡単な手順で可能です手順。

1.コンテナーから始める

最初のステップは、列用のコンテナーを作成することです。これはすべての列の親要素となり、container-fluid クラスを持つ必要があります。

<div class="container-fluid">

2.行の追加

コンテナ内に行を追加する必要があります。これは列のコンテナーとなり、行クラスが必要です。

<div class="row">

3.列を追加します

行内に列を追加する必要があります。各列には Col クラスが必要です。必要な列の数は、作成しようとしているレイアウトによって異なります。 5 列レイアウトの場合は、5 列を追加する必要があります。

<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

4.列にコンテンツを追加します

列を追加したら、列にコンテンツを追加できます。これには、テキスト、画像、その他任意のものを使用できます。

<div class="col">
  <h1>Column 1</h1>
  <p>This is some content for column 1.</p>
</div>

5.タグを閉じます

すべての列を追加したら、行タグとコンテナ タグを閉じる必要があります。

</div>
</div>

6.レイアウトをお楽しみください!

Bootstrap で 5 列のレイアウトが正常に作成されました。必要に応じて列のスタイルを設定できるようになりました。

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