Bootstrap 5 基于视口宽度实现列堆叠效果失效问题咨询

问题根因 #

你使用的是Bootstrap 5版本，该版本已移除xs断点标识符，默认无后缀的col-*类就对应视口宽度<576px的最小断点配置，你写的col-xs-12属于Bootstrap 3/4的旧写法，在Bootstrap 5中无法生效。

修复方案 #

要实现「小于指定阈值时两列堆叠、大于等于阈值时按9:3分列」的效果，直接按照Bootstrap 5的栅格规则调整列的类即可。比如你要以md断点（768px）作为堆叠阈值，修改后的HTML结构如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-9">
            <div class="container">...</div>
        </div>
        <div class="col-12 col-md-3">
           <div class="container">...</div>
        </div>
    </div>
</div>

规则说明 #

• Bootstrap 5栅格为移动端优先逻辑，小断点的配置会默认作用到更大的断点，直到被更大断点的配置覆盖：
  • col-12：默认所有视口宽度下占12列（全宽，也就是堆叠效果）
  • col-md-9/col-md-3：当视口宽度≥768px（md断点）时，分别占9列、3列，实现并排效果
• 如果你需要调整堆叠阈值，可以替换md为其他断点标识：
  • sm：阈值576px
  • lg：阈值992px
  • xl：阈值1200px
  • xxl：阈值1400px

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