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

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

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

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

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

<div class="container-fluid">
<h3 id="行の追加">2.行の追加</h3>
<p>コンテナ内に行を追加する必要があります。これは列のコンテナーとなり、行クラスが必要です。</p>
<pre class="brush:php;toolbar:false"><div class="row">
<h3 id="列を追加します">3.列を追加します</h3>
<p>行内に列を追加する必要があります。各列には Col クラスが必要です。必要な列の数は、作成しようとしているレイアウトによって異なります。 5 列レイアウトの場合は、5 列を追加する必要があります。</p>
<pre class="brush:php;toolbar:false"><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 id="Column">Column 1</h1>
  <p>This is some content for column 1.</p>
</div>

5.タグを閉じます

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