Bootstrap 4 不支持 col-md-5，因其栅格仅预设12的约数类；需手动添加 .col-md-1-5 并设置 flex: 0 0 20%、max-width: 20%、box-sizing: border-box 及对应断点媒体查询，同时注意移动端五列不适用交互设计。
不能直接扩展 Bootstrap 4 的栅格系统为 5 等分——它的 CSS 类是静态生成的，col-md-5 这类写法根本不会生效，浏览器找不到对应样式。你得自己补全逻辑，而不是“改系统”。关键不是加几行 CSS，而是选对方式、避开 Flex 容器的默认行为、处理好断点和盒模型。
为什么 col-md-5 不起作用
Bootstrap 4 的栅格类（如 col-md-4）全部硬编码在 CSS 中，只提供 12 的约数：1、2、3、4、6、12。5 不是约数，所以没有 col-md-5 对应的规则。浏览器解析时直接忽略该 class，元素退回到默认块级行为（100% 宽 + 换行）。
- 写
col-md-2× 5 → 总宽 = 10/12，留白；写col-md-3× 5 → 总宽 = 15/12，强制换行 -
row-cols-5是 Bootstrap 4.5+ 才引入的，且它只控制“每行最多几个子项”，不定义单个子项宽度，底层仍走 12 列计算逻辑（容易误以为有效） - 直接给
.col加width: 20%无效：因为.row是display: flex，flex item 的width会被flex-grow覆盖
手动添加 .col-md-1-5 类的正确写法
必须同时锁定 flex 行为 + 百分比宽度 + 盒模型，否则在不同浏览器或内容下会错位、拉伸或溢出。
- 核心三属性：
flex: 0 0 20%（不增长、不收缩、基准宽 20%） - 必须加
max-width: 20%，防某些浏览器 flex 计算偏差 - 必须设
box-sizing: border-box，否则 padding 会让实际宽度超 20% - 媒体查询要覆盖完整断点：
@media (min-width: 768px)（sm）、@media (min-width: 992px)（md）、@media (min-width: 1200px)（lg） - 别漏掉
padding-left/right: 15px（和原生.col一致），否则 gutter 不对齐
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
@media (min-width: 992px) {
.col-md-1-5 {
flex: 0 0 20%;
max-width: 20%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}
}
用 row-cols-5 的前提和限制
这个类在 Bootstrap 4.5+ 可用（非 4.0 原生），但它不是“五列栅格系统”，只是让 .row 下所有 .col 子项均分容器宽度。它能快速实现视觉五等分，但有明确边界条件：
- 必须搭配
.col使用（不能只写<div>），否则无效果 <li>响应式写法要明确：如 <code>row-cols-2 row-cols-md-5，否则小屏也强行五列 - 内容含长文本或图片时，需加
flex-shrink: 0或min-width: 0防压缩变形 - 它不提供 offset/push/pull 等辅助类，想留空或偏移得额外写 margin
- 嵌套时，内部
.row不继承该行为，需单独加row-cols-* - 必须降级：用
row-cols-1 row-cols-sm-2 row-cols-md-5，确保 xs/sm 下自动收拢 - 若业务强依赖横向多选项（如工具栏），优先考虑
overflow-x: auto+whitespace-nowrap的滚动容器，而非栅格 - 真要撑满小屏五列，得同步改字体大小、内边距、图标尺寸——这些已超出栅格范畴，属于整套响应式策略重设计
移动端五列几乎不该存在
375px 屏宽下 20% ≈ 75px，放图标+文字+触摸热区，基本不可用。这不是样式问题，是交互设计红线。
真正卡住人的，从来不是怎么写出 20%，而是没在写第一行 CSS 前想清楚：这个五列，在 iPhone 上点得准吗？缩略图会不会糊？用户真的需要同时看到全部五个入口，还是只是设计师画了线框图？
