Bootstrap 3 および Bootstrap 4 で複数行の列を作成するにはどうすればよいですか?

複数行のブートストラップ列

問題:
特定の列が複数にまたがるブートストラップ グリッドの作成行、特にボックスがプログラムで生成される場合sequence.

解決策:

ブートストラップ 3:

1. 全体を定義するために外側の .row div を作成します。 content width.
2. 外側の行内に列 div を追加します。 (
   ) を使用して 2 行にまたがります。
3. 2 行の列内に別の内部 .row を作成します。
4. 内部行内に子列 div (
   ) を追加します( s) 必要に応じて、残りのスペースを埋めます。

   ブートストラップ4:

   1. 外側の .container または .container-fluid div を作成して、コンテンツの幅を定義します。
   2. 外側の .row div を追加します。
   3. 外側の行の内側に、列 div (
      ) を追加して 2 つの行にまたがるようにします。 rows.
   4. 内部列 div (
      ) の .w-100 クラスを使用して、2 行の列内に別の内部 .row を作成し、全幅に強制的に広げます。
   5. 必要に応じて、内側の行内に子列 div (
      ) を追加して、残りの行を埋めますspace.

      コード例:

      ブートストラップ 3:

      <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>

      ブートストラップ 4:

      <div class="container">
        <div class="row">
          <div class="col">
            <div class="well">1
              <br>
              <br>
              <br>
              <br>
              <br>
            </div>
          </div>
          <div class="row w-100">
            <div class="col">
              <div class="well">2</div>
            </div>
            <div class="col">
              <div class="well">3</div>
            </div>
          </div>
          <div class="row w-100">
            <div class="col">
              <div class="well">4</div>
            </div>
            <div class="col">
              <div class="well">5</div>
            </div>
          </div>
        </div>
      </div>