Bootstrap5使用等宽col类时列垂直堆叠不水平排列问题

核心原因 #

你实际加载的是Bootstrap 3而非Bootstrap 5，两类版本的栅格系统规则存在差异：

• Bootstrap 3 无.col（无数字、无断点）、.col-*（仅带数字无断点）这类原生类，只有带断点前缀的.col-xs-*/.col-sm-*等类，所以你写.col或.col-4时没有对应样式，div默认块级特性会导致垂直堆叠
• Bootstrap 3 中.col-xs-4是生效的合法类，和你反馈的现象完全匹配

排查解决步骤 #

• 核对CSS引入地址：检查页面head中bootstrap.min.css的引入链接，确认版本号为5.x，正确的Bootstrap5引入示例如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

• 排查包版本：如果使用npm/yarn等包管理工具引入，执行以下命令核对版本，版本不符则重装对应版本：

# 查看已安装bootstrap版本
npm list bootstrap
# 安装Bootstrap5最新版
npm install bootstrap@5

• 排查样式冲突：打开浏览器F12开发者工具，选中堆叠的列元素，检查样式面板：
  • 确认.col类的flex:1 0 0%规则是否正常生效，没有被自定义样式的width:100% !important这类规则覆盖
  • 确认父级.row类的display:flex规则正常生效
• 确认结构合规：栅格结构必须严格遵循「container > row > col」的嵌套层级，col的直接父元素必须是row，否则栅格规则不生效

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