如何在 Bootstrap 3 和 Bootstrap 4 中創造多行列？

多行 Bootstrap 欄位

問題：
建立特定欄位跨越多個的 Bootstrap網格行，特別是以程式產生框框時

解：

Bootstrap 3：

1. 建立一個外部.row div 來定義整體內容寬度。
2. 在外行內，新增列 div (
   ) 跨越兩行。
3. 在兩個行列中建立另一個內部 .row。
4. 在內行中新增子列 div (
   )( s) 根據需要填入剩餘空間。

   Bootstrap 4:

   1. 建立外部 .container 或 .container-fluid div 來定義內容寬度。
   2. 新增外部 .row div。
   3. 在外行內部，新增列 div (
      ) 以跨越兩行。
   4. 建立兩個行列中的另一個內部 .row 在內列 div (
      ) 上使用 .w-100 類，強制其跨越整個寬度。
   5. 新增子列 div (
      ) >) 根據需要填入內部行以填入剩餘空間。

      範例程式碼：

      引導程式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>

      引導程式

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