ブートストラップ 3 列を複数の行にまたがる方法を教えてください。

ブートストラップ列を複数の行にまたがる

ブートストラップを使用してグリッド レイアウトを作成するのは簡単な作業です。ただし、列を複数の行にまたがるという課題に直面すると、少し混乱する可能性があります。このガイドでは、Bootstrap 3 を使用してこれを実現する方法を説明します。

Bootstrap 3 の解決策:

Bootstrap 3 で 2 行にまたがる列を作成するには、次の手順に従います。手順:

<div class="row">
  <div class="col-md-4">
    <div class="well">
      1
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <div class="well">
          2
        </div>
      </div>
      <div class="col-md-6">
        <div class="well">
          3
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="well">
          4
        </div>
      </div>
      <div class="col-md-6">
        <div class="well">
          5
        </div>
      </div>
    </div>
  </div>
</div>

説明:

この HTML コードでは、2 行のグリッドを作成します。最初の行には 4 つのユニットにわたる 1 つの列が含まれ、2 番目の行にはそれぞれ 2 つのユニットにわたる 2 つの列が含まれます。最初の行の列は、入れ子になった行構造に含まれていないため、2 行にまたがっています。

以上がブートストラップ 3 列を複数の行にまたがる方法を教えてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。