Bootstrap 3 中 .col-md-5 不生效是因为栅格系统仅支持12的约数（1、2、3、4、6、12），5不在其中，CSS未定义该类；需手动添加如 .col-md-2dot4 并设置 width: 20% 及响应式规则。
为什么 .col-md-5 在 Bootstrap 3 中不生效
Bootstrap 3 的栅格类是静态生成的，只包含 col-xs-1 到 col-xs-12、col-sm-1 到 col-sm-12 等固定组合，所有数字都必须是 12 的约数（1、2、3、4、6、12）。5 不在其中，所以写 .col-md-5 浏览器完全忽略——CSS 文件里压根没定义这个选择器。
这不是漏写，是设计使然：12 列兼顾了常见等分需求（2/3/4/6 列），又控制了 CSS 体积。想支持 5 列，必须自己补。
手动添加 .col-md-2dot4 类实现 20% 宽度
最直接的方式是仿照 Bootstrap 原有类规则，新增一个宽度为 20% 的自定义类。注意命名要避开冲突（比如别用 .col-md-5），并覆盖关键样式：
.col-md-2dot4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 992px) {
.col-md-2dot4 {
float: left;
width: 20%;
}
}
- 必须加
@media查询，否则小屏下也会强制 20%，破坏堆叠逻辑 -
float: left和width: 20%缺一不可；漏掉float会导致列垂直堆叠 - 左右
padding是为了兼容 Bootstrap 默认的 gutter（15px），避免内容贴边 - 如果要用在其他断点（如
sm或lg），需复制对应媒体查询块并改写
用 row + flexbox 替代浮动（需谨慎）
Bootstrap 3 原生不基于 Flexbox，但你可以用自定义类强行启用。不过直接给 .row 加 display: flex 会出问题：子元素 .col-md-* 仍带 float 和固定 width，导致塌缩或错位。
必须同步清除浮动和宽度，并让子列成为真正的 flex 项目：
.row-flex-5 {
display: flex;
}
.row-flex-5 > [class*="col-"] {
float: none !important;
width: auto !important;
flex: 1 0 20%;
}
-
flex: 1 0 20%表示“可放大、不缩小、基础宽度 20%”，比单纯flex: 1更可控 -
!important是必须的，否则 Bootstrap 的原始 CSS 会覆盖 - 此方案在 IE9 及更早版本不支持，若需兼容，退回浮动方案
- 嵌套列时，内部
.row需单独处理，flex 不会穿透
容易被忽略的细节：gutter、响应断点与内容溢出
5 列布局看着简单，实际落地常卡在三个地方：
- 默认 15px 左右 gutter 会让 5 列总宽超 100%，尤其在窄屏下；建议额外加
mx-n3（Bootstrap 3 没这工具类，得手写margin-left: -15px; margin-right: -15px）抵消 - 只写
.col-md-2dot4意味着小屏（.col-xs-2dot4 +.col-sm-2dot4，且每个都要配对应媒体查询 - 长文本、图片、
table等未设max-width或word-break的内容，会撑开列宽，破坏等宽；建议在列内加style="min-width: 0;"防止 flex 项目溢出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
