实现一个大DIV与两个小DIV的对齐布局

看起来你想用Bootstrap的栅格系统搭建「左侧一个大内容块、右侧上下两个小内容块」的布局对吧？我帮你把未完成的代码补全，并梳理清楚结构，这样就能完美实现你想要的效果了：

<!-- 外层容器 -->
<div class="container">
  <div class="row">
    <!-- 左侧大内容块：占据大屏幕8/12宽度 -->
    <div class="col-lg-8">
      <div class="card">
        <a href="#">
          <img style="height: 420px; object-fit: cover;" class="card-img-top" src="http://placehold.it/700x400" alt="左侧大卡片图片">
        </a>
      </div>
    </div>

    <!-- 右侧两个小内容块：占据大屏幕4/12宽度，内部垂直排列 -->
    <div class="col-lg-4">
      <div class="row g-3"> <!-- g-3是Bootstrap内置间距类，给小卡片添加垂直间距 -->
        <!-- 第一个小卡片 -->
        <div class="col-lg-12">
          <div class="card">
            <a href="#">
              <img style="height: 200px; object-fit: cover;" class="card-img-top" src="http://placehold.it/400x200" alt="右侧小卡片1">
            </a>
          </div>
        </div>
        <!-- 第二个小卡片 -->
        <div class="col-lg-12">
          <div class="card">
            <a href="#">
              <img style="height: 200px; object-fit: cover;" class="card-img-top" src="http://placehold.it/400x200" alt="右侧小卡片2">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键细节说明： #

• 栅格逻辑：外层.row遵循Bootstrap 12列规则，左侧.col-lg-8占8份宽度，右侧.col-lg-4占剩余4份；右侧内部用.row嵌套，两个小卡片都用.col-lg-12占满右侧宽度，自然形成上下堆叠效果。
• 图片优化：给图片添加object-fit: cover，能让图片按比例填充容器，避免拉伸变形，比单纯设置高度更美观。
• 响应式适配：.col-lg-*针对≥992px的大屏幕生效，小屏幕会自动垂直堆叠；如果想在平板等中等屏幕保持左右布局，可把col-lg-*替换为col-md-*。
• 样式简化：用Bootstrap内置的g-3类替代自定义margin，快速实现小卡片间的合理间距，减少冗余代码。

记得提前引入Bootstrap的CSS文件，否则栅格和卡片样式无法生效哦～

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