Bootstrap 5.3网格系统类表现与预期相反问题求助

问题原因 #

Bootstrap 5采用移动优先的响应式设计逻辑，断点规则明确：

• col-*（无前缀）：作用于所有屏幕尺寸（包括<576px的超小屏幕），优先级低于带断点前缀的类
• col-sm-*：仅在**屏幕宽度≥576px（小屏幕及以上）**时生效，会覆盖同元素上的col-*类

你的代码写法导致：

• 屏幕≥576px时，col-sm-*生效，显示12/8/4的布局
• 屏幕<576px时，只有col-*生效，显示3/7/2的布局
  这和你预期的“小屏幕用col-sm-、大屏用col-”完全相反，核心是搞反了移动优先的断点覆盖逻辑。

修复方案 #

如果你的需求是：小屏幕（<576px）显示12/8/4布局，≥576px的屏幕显示3/7/2布局，需要调换类的顺序与断点前缀，正确代码如下：

<div class="container">
    <div class="row" style="height:500px;">
        <div class="col-12 col-sm-3 bg-danger"></div>
        <div class="col-8 col-sm-7 bg-secondary"></div>
        <div class="col-4 col-sm-2 bg-success"></div>
    </div>
</div>

逻辑说明 #

• 先定义最小屏幕（<576px）的col-*类，再定义≥576px屏幕的col-sm-*类
• 当屏幕尺寸达到sm断点（576px）时，col-sm-*会自动覆盖col-*，实现预期的布局切换

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