Bootstrap Card搭建响应式定价表时网格布局失效问题咨询

页面布局无法达到预期，核心原因是HTML嵌套结构严重错位，完全打乱了Bootstrap栅格系统的层级计算逻辑，并非响应式类名书写错误。

具体问题点如下：

• 第一组Chihuahua定价卡的嵌套错误：提前闭合了<div class="card">标签，导致原本属于卡片内部的card-body模块，直接脱离栅格列容器，甚至跑到了外层.row的闭合范围外，根本不参与栅格宽度计算。
• 多余的闭合标签造成层级混乱：代码末尾多写了两层</div>，把三个本该并列在同一个.row容器下的栅格列分割成了零散结构，栅格系统无法识别正确的父子元素关系，自然无法计算列宽。
• 第三个定价卡的响应式类不明确：第三个列只添加了col-lg-4类，虽然默认情况下低于lg断点会占满整行宽度，但为了逻辑清晰、避免自定义CSS干扰默认行为，最好显式补充col-md-12类，明确平板断点下的占宽规则。

修正时需要严格对齐Bootstrap的栅格与组件嵌套规则：

• 所有需要参与栅格计算的列元素，必须是.row的直接子元素，不能被无关标签隔断
• 卡片组件的内部元素（card-header、card-body）必须是.card的直接子元素，不能出现层级跳脱
• 列类匹配预期效果：平板断点下，前两个列加col-md-6实现50%占宽，第三个列加col-md-12实现100%占宽；桌面端三个列统一使用col-lg-4实现三等分布局。

修正后的核心结构参考：

<section id="pricing">
  <h2>A Plan for Every Dog's Needs</h2>
  <p>Simple and affordable price plans for your and your dog.</p>
  <!-- 栅格容器 -->
  <div class="row">
    <!-- 第一个列：平板占50%，桌面占1/3 -->
    <div class="col-lg-4 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3>Chihuahua</h3>
        </div>
        <!-- 原本错位的card-body放回card内部层级 -->
        <div class="card-body">
          <h2>Free</h2>
          <p>5 Matches Per Day</p>
          <p>10 Messages Per Day</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>
      </div>
    </div>
    <!-- 第二个列：平板占50%，桌面占1/3 -->
    <div class="col-lg-4 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3>Labrador</h3>
        </div>
        <div class="card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>
      </div>
    </div>
    <!-- 第三个列：平板占100%，桌面占1/3 -->
    <div class="col-lg-4 col-md-12">
      <div class="card">
        <div class="card-header">
          <h3>Mastiff</h3>
        </div>
        <div class="card-body">
          <h2>$99 / mo</h2>
          <p>Pirority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</section>

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