Bootstrap 3.3：如何实现单个div列轻松跨多行布局？

嘿，很高兴你在学习Bootstrap！关于单个col列跨多行的需求，完全可以轻松实现，我给你分享两种实用的方案，都是Bootstrap原生支持或者配合简单自定义样式就能搞定的：

方案一：栅格嵌套 + 高度填充类 #

这是最贴合Bootstrap栅格体系的做法，核心思路是把需要跨多行的列作为容器，内部用Flex工具类控制内容对齐，另一侧则用多个独立行来对应，再通过h-100类让跨行列和右侧总高度保持一致：

<div class="container">
  <div class="row">
    <!-- 跨多行的左侧列 -->
    <div class="col-md-4 bg-light h-100">
      <div class="d-flex align-items-center justify-content-center h-100">
        这个列跨了3行的高度
      </div>
    </div>
    <!-- 右侧的多行小列 -->
    <div class="col-md-8">
      <div class="row mb-3">
        <div class="col-12 bg-primary text-white p-3">第一行小列</div>
      </div>
      <div class="row mb-3">
        <div class="col-12 bg-success text-white p-3">第二行小列</div>
      </div>
      <div class="row">
        <div class="col-12 bg-info text-white p-3">第三行小列</div>
      </div>
    </div>
  </div>
</div>

我平时做项目的时候经常用这个方法，既符合Bootstrap的设计逻辑，又不用写太多自定义样式，适配性也很强。

方案二：自定义行高 + 精准高度匹配 #

如果你的场景需要固定行高，或者不想用嵌套结构，也可以给右侧每行设置固定高度，再让跨行列的高度等于这些行的总高度（记得算上间距哦）：

<style>
  .custom-row {
    height: 100px;
  }
  .custom-col {
    height: 320px; /* 3个100px行 + 两次mb-2间距的总高度 */
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-light custom-col d-flex align-items-center justify-content-center">
      这个列跨了3行的高度
    </div>
    <div class="col-md-8">
      <div class="row mb-2 custom-row">
        <div class="col-12 bg-primary text-white d-flex align-items-center p-3">第一行小列</div>
      </div>
      <div class="row mb-2 custom-row">
        <div class="col-12 bg-success text-white d-flex align-items-center p-3">第二行小列</div>
      </div>
      <div class="row custom-row">
        <div class="col-12 bg-info text-white d-flex align-items-center p-3">第三行小列</div>
      </div>
    </div>
  </div>
</div>

这种方法适合对高度有严格要求的场景，调整起来也很直观。

另外要提一句，Bootstrap的栅格系统本身灵活性很高，只要遵循container > row > col的层级逻辑，再配合Flex工具类，大部分不规则布局都能轻松搞定，不用太担心复杂的样式问题~

内容的提问来源于stack exchange，提问作者moonshine