Bootstrapの行(rows)の使用方法


  1. 基本的な行の作成: Bootstrapでは、.rowクラスを使用して行を作成します。行は、コンテンツを水平方向にグリッドに配置するためのコンテナです。以下のコード例を参考にしてください。
<div class="container">
  <div class="row">
    <div class="col">コンテンツ1</div>
    <div class="col">コンテンツ2</div>
    <div class="col">コンテンツ3</div>
  </div>
</div>
  1. 列の幅の指定: Bootstrapのグリッドシステムでは、12個のカラムからなるグリッドが使用されます。各列(.colクラス)には、幅を指定するためのクラス(.col-数字)があります。以下のコード例を参考にしてください。
<div class="container">
  <div class="row">
    <div class="col-6">幅50%のコンテンツ</div>
    <div class="col-3">幅25%のコンテンツ</div>
    <div class="col-3">幅25%のコンテンツ</div>
  </div>
</div>
  1. レスポンシブなレイアウトの作成: Bootstrapのグリッドシステムは、異なるデバイスや画面サイズに対応するためのクラスを提供しています。以下のコード例を参考にして、レスポンシブなレイアウトを作成することができます。
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">中サイズデバイス用の幅50%、大サイズデバイス用の幅33.33%のコンテンツ</div>
    <div class="col-md-6 col-lg-4">中サイズデバイス用の幅50%、大サイズデバイス用の幅33.33%のコンテンツ</div>
    <div class="col-lg-4">大サイズデバイス用の幅33.33%のコンテンツ</div>
  </div>
</div>

これらはBootstrapの行(rows)の基本的な使用方法とコード例です。さまざまなクラスやオプションを組み合わせて、さらに複雑なレイアウトを作成することもできます。詳細な情報は、Bootstrapの公式ドキュメントを参照してください。