如何根据屏幕尺寸调整Bootstrap列尺寸实现6元素响应式布局

你遇到的「大屏显示正常、小屏逐行排列6个元素」的现象，本质是Bootstrap 版本与类名不匹配导致小屏栅格类失效：

• 代码中使用的col-xs-*系列类名是 Bootstrap 3 的专属语法
• 从 Bootstrap 4 开始，官方移除了xs类前缀，原本对应手机端（<576px 尺寸）的栅格类直接去掉前缀，不再带xs标识
• 页面实际加载 Bootstrap 4/5 版本时，col-sm-2是合法类名，会在大于等于sm尺寸的大屏下正常生效，每个元素占2列宽度，所以大屏6个元素单行排列是正常的
• 但col-xs-4是无规则的无效类，不会触发任何栅格宽度计算，在xs小尺寸下每个列div默认占满整行宽度，自然就排成了单独的6行。

按照 Bootstrap 栅格规则匹配对应断点的列宽，完全匹配布局要求：

• 手机端（xs 尺寸）：每个元素占4份栅格，12份总栅格刚好每行放3个
• 大于手机尺寸（sm 及以上）：每个元素占2份栅格，12份总栅格刚好每行放6个

<div class="row">
  <div class="col-4 col-sm-2">1</div>
  <div class="col-4 col-sm-2">2</div>
  <div class="col-4 col-sm-2">3</div>
  <div class="col-4 col-sm-2">4</div>
  <div class="col-4 col-sm-2">5</div>
  <div class="col-4 col-sm-2">6</div>
</div>

• 如果项目使用的是 Bootstrap 3 版本，原代码的类名写法（col-xs-4 col-sm-2）本身是符合预期的，可排查是否存在自定义CSS覆盖、Bootstrap文件未正确引入的问题
• 代码生效后将自动匹配要求的布局：大屏单行横向排满6个元素，手机端自动换为两行，第一行排1、2、3，第二行排4、5、6。

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