基于Bootstrap 3模板构建网格系统：求助实现两个小列布局

嘿，这事儿不难！你需要用到Bootstrap 3的网格嵌套功能，把右边的col-sm-6拆成上下两个子列就行。下面是调整后的完整代码，我已经帮你把剩余的两个小列加上了：

<style>
 .bg-img { background-position: center center; background-size: cover; background-repeat: no-repeat; }
 .item1 { height:600px; }
 .item2 { height:300px; }
 .item3 { height: 300px; }
</style>
<section>
 <div class="container-fluid">
  <div class="row">
   <!-- 左侧大列 -->
   <div class="col-sm-6 bg-img item1" style="background-image:url(https://placehold.it/600x600;)"></div>
   <!-- 右侧列容器，内部嵌套子网格 -->
   <div class="col-sm-6">
    <div class="row">
     <!-- 右侧上小列 -->
     <div class="col-sm-12 bg-img item2" style="background-image:url(https://placehold.it/300x300;)"></div>
     <!-- 右侧下小列 -->
     <div class="col-sm-12 bg-img item3" style="background-image:url(https://placehold.it/300x300;)"></div>
    </div>
   </div>
  </div>
 </div>
</section>

关键说明： #

• 我把原来单独的item2所在列，改成了一个包含子row的col-sm-6容器
• 子row里的两个col-sm-12会占满父列的宽度，各自高度设为300px，加起来刚好和左侧600px的item1高度对齐
• 背景图片我换成了适配小列尺寸的300x300占位图，你可以根据实际需求替换成自己的图片

这样调整后，你的网格布局就和模板里的4元素结构一致啦！

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