PR
TIPS

Bootstrapのグリッドでw-100要素を使用して改行する方法

Bootstrapは最も人気のあるフレームワークの一つで、そのグリッドシステムはレスポンシブデザインを簡単に実現します。このシステムは、コンテンツを様々な列に分割するために使用されますが、時々、新しい行を作成したい場合もあります。

Bootstrapでは、w-100クラスを使用することでこれを実現することが可能です。このクラスは要素の幅を100%に設定し、その結果、次の列が新しい行に押し出されます。

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="w-100"></div>
  <div class="col">3</div>
</div>

この例では、w-100クラスを持つdiv要素が、列1と列2の間に挿入され、列3を新しい行に押し出しています。

したがって、Bootstrapのグリッドシステムを使用する際には、w-100クラスを活用してコンテンツの配置をより細かく制御することが可能です。

この記事を書いた人
Naokazu Yokoo

エンジニア歴20年以上。現在はWeb / AI領域で活動中。
開発環境・サーバー環境ともに速度と効率性を追求しています。

Follow Naokazu Yokoo
Follow Naokazu Yokoo

Comment

タイトルとURLをコピーしました