Bootstrap默认不支持5列栅格，因12列体系中5非约数；可用col-2+justify-content-center实现视觉五等分，或用CSS Grid精准实现20%等宽。
Bootstrap 默认不支持 5 列栅格，col-* 类只提供 1–12 的等分基础
Bootstrap 的 container + row + col 体系基于 12 列总宽设计，所有 col-* 类（如 col-3、col-4）都是 12 的约数。5 不是 12 的约数，所以没有 col-2.4 或 col-5 这种原生类——硬写 col-2 ×5 会溢出（2×5=10），留白；col-3 ×5 则超限（3×5=15 > 12），触发换行。
用 col-2 + ms-auto me-auto 居中补空，最简兼容方案
如果目标只是“视觉上五等分”，且能接受容器宽度略小于 100%，可用 col-2（即 2/12 = 1/6 ≈ 16.67%）配合左右自动外边距，在 row 内居中排列 5 个列，实际占用 10/12 宽度，两侧各留 1/12 空隙：
<div class="row"> <div class="col-2 ms-auto me-auto">1</div> <div class="col-2">2</div> <div class="col-2">3</div> <div class="col-2">4</div> <div class="col-2 me-auto">5</div> </div>
⚠️ 注意：这并非真正等宽（因 ms-auto 只加在第一个元素，me-auto 在最后一个），更可靠的是统一用 col-2 并包裹在 justify-content-center 的 row 中：
<div class="row justify-content-center"> <div class="col-2">1</div> <div class="col-2">2</div> <div class="col-2">3</div> <div class="col-2">4</div> <div class="col-2">5</div> </div>
此时整行居中，每列宽度一致，但总宽为 10/12，适合内容区域不需撑满的场景。
用 CSS Grid 覆盖 Bootstrap 栅格，精准控制 5 等分
当必须严格 20% 宽度、响应式行为可控时，绕过 col-* 直接用 CSS Grid 更干净。给 row 添加自定义类，重置其 display 并定义列轨道：
<div class="row grid-5-cols"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
grid-5-cols 定义如下（建议放在自定义 CSS 文件末尾，避免被 Bootstrap 覆盖）：
.grid-5-cols {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
@media (max-width: 576px) {
.grid-5-cols {
grid-template-columns: 1fr;
}
}
✅ 优势：完全等宽、无 Bootstrap 列数限制、gap 可控、移动端可退化为单列。
⚠️ 注意：此时 col-* 类失效，不要混用；若需保留 Bootstrap 的响应式断点逻辑，需手动在媒体查询中复现。
用 Sass 自定义 col-5ths 工具类（仅限 Bootstrap 5 + Sass 项目）
如果你用的是 Bootstrap 源码（Sass 版本），可扩展栅格系统：在自定义 Sass 文件中修改 $grid-columns 或新增断点类。推荐做法是添加一个 col-5ths 类族：
// _custom-grid.scss
@each $breakpoint, $values in map-get($grid-breakpoints, 'sm') {
@include media-breakpoint-up($breakpoint) {
.col-5ths {
flex: 0 0 auto;
width: 20%;
}
}
}
然后编译后即可使用：
<div class="row"> <div class="col-5ths">1</div> <div class="col-5ths">2</div> <div class="col-5ths">3</div> <div class="col-5ths">4</div> <div class="col-5ths">5</div> </div>
⚠️ 关键点：此法要求你有 Sass 构建流程，且需手动处理响应式变体（如 col-sm-5ths）；若用 CDN 引入的 CSS 版 Bootstrap，则无法生效。
真正平分 5 列的核心矛盾不在写法多寡，而在于是否接受「视觉近似」还是坚持「数学精确」。前者用 col-2 + justify-content-center 最快上线；后者务必切换到 CSS Grid，别在 12 列框架里硬掰像素。另外，所有方案都要提前确认：父容器有没有 padding 干扰、子元素有没有默认 margin 堆叠、是否需要 gutter 间隙——这些细节比列数本身更容易导致布局错位。
