Bootstrap 5.3价格卡片小屏幕无法占满列宽问题求助

问题根源 #

你只设置了col-lg-*类，这类样式仅对**大屏（≥992px）**生效。小屏幕（<992px）下Bootstrap会默认堆叠列，但如果卡片本身有默认宽度限制，就会出现无法占满列宽的情况。必须为小屏幕添加对应的列类，才能强制卡片在小屏上占满整行。

修改后的代码示例 #

假设你原来的代码结构如下：

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <!-- 卡片内容 -->
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <!-- 卡片内容 -->
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <!-- 卡片内容 -->
      </div>
    </div>
  </div>
</div>

修改为以下结构，添加小屏适配类并强制卡片占满宽度：

<div class="container">
  <div class="row">
    <!-- 小屏（所有尺寸）占满整行，大屏保持占满 -->
    <div class="col-12 col-lg-12">
      <div class="card w-100">
        <!-- 卡片内容 -->
      </div>
    </div>
    <!-- 小屏占满整行，大屏各占一半 -->
    <div class="col-12 col-lg-6">
      <div class="card w-100">
        <!-- 卡片内容 -->
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card w-100">
        <!-- 卡片内容 -->
      </div>
    </div>
  </div>
</div>

关键注意事项 #

• col-12：针对最小尺寸屏幕（<576px）强制占满整行，如果你只需要适配≥576px的小屏，也可以用col-sm-12。
• w-100：强制卡片宽度为父容器的100%，避免卡片自身的默认宽度限制导致无法占满列宽。
• 检查自定义CSS：确认没有给列或卡片设置max-width、固定width等样式，这类自定义样式会覆盖Bootstrap的自适应布局。
• 容器嵌套：row必须直接放在container或container-fluid下，否则网格的内边距和布局逻辑会失效。

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