如何在 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>

      引导程序 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>