Bootstrap 5栅格系统的五列等分布局方案

Bootstrap 5 原生不支持 col-5 类，因其栅格基于12等分，5非因数；推荐用 row-cols-5 实现五等分，或自定义 flex: 0 0 20% 类并处理断点、gutters 和溢出。Bootstrap 5 原生不支持 col-5 类，别硬套命名规则Bootstrap 5 的栅格系统默认按 12 等分设计，所有内置列类（如 col-3、col-4）都基于 12 的因数。5 不是 12 的因数，所以没有 col-5 或 col-md-5 这种“五等分”原生类——强行写 col-5 会被忽略，页面照样单列堆叠或错位。真正能用的方案只有两个：一是用 Flex 自动均分（推荐），二是手动加自定义 CSS（兼容旧项目）。用 .col 配合 .row-cols-5 是最轻量、语义最正的解法手写 width: 20% 要自己处理 gutter（内边距/外边距）、断点和 Flex 主轴对齐，容易漏掉 min-width: 0 导致换行异常别在 .col 上再加 float 或 display: inline-block —— Bootstrap 5 已彻底转向 Flex，这些会破坏布局流row-cols-5 是最省心的五等分布局方式这个类直接作用于 .row，告诉它“不管里面几个 .col，每行强制塞 5 个”，且自动等宽（每个占 20%）。它不依赖子元素数量，哪怕你只放 3 个 .col，它们也还是均分宽度，只是后面留空。示例： Trenz AI驱动的社交电商营销平台，专为TikTok Shop设计