如何使 Bootstrap 3 列跨多行？

将 Bootstrap 列跨多行

使用 Bootstrap 创建网格布局可能是一项简单的任务。然而，当面临一列跨越多行的挑战时，可能会有点令人困惑。本指南将演示如何使用 Bootstrap 3 实现此目的。

Bootstrap 3 解决方案：

要在 Bootstrap 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>

说明：

在此 HTML 代码中，我们创建一个两行网格。第一行包含跨越四个单元的一列，而第二行包含跨越两个单元的两列。第一行中的列跨越两行，因为它不包含在嵌套行结构中。

以上是如何使 Bootstrap 3 列跨多行？的详细内容。更多信息请关注PHP中文网其他相关文章！