Bootstrap栅格在移动设备渲染异常，col-xs-6不生效如何排查

核心原因 #

Bootstrap 5 已经移除了col-xs-*格式的超小屏幕栅格类，从Bootstrap 4开始，最小断点（<576px，对应原xs尺寸）的栅格类不需要加xs前缀，直接使用col-*即可。你代码中的col-xs-6在Bootstrap 5.x版本中是无效类，所以小屏幕下列会默认堆叠为100%宽度。

修复代码 #

将所有列的col-xs-6替换为col-6即可，修改后的代码如下：

<div class="container-fluid">
  <h1>new and trending</h1>
  <div class="row">
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
  </div>
</div>

额外排查项 #

如果修改后仍未生效，按以下顺序排查：

• 确认页面头部已经添加响应式viewport元标签，缺失该标签会导致移动设备不识别屏幕尺寸，栅格规则不会触发：

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

• 用浏览器开发者工具审查列元素，检查是否有自定义CSS覆盖了栅格的宽度属性，或者Bootswatch样式文件未正确加载。

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