.col-md-3 放 5 个会错位，因 5×25%=125% 超出 12 列容器宽度，触发 Flex 换行；正确解法是用自定义 .col-md-1-5（20%）或 CSS Grid 的 repeat(5, 1fr)。
为什么 .col-md-3 放 5 个会错位
Bootstrap 的 .col-md-3 表示“占 12 列中的 3 列”，即宽度为 25%；5 × 25% = 125%，超出父容器，触发 Flex 自动换行——第五个 div 就会掉到第二行。这不是浏览器 bug，而是栅格系统严格按 12 等分计算的结果。
常见错误现象包括：
- 第五栏单独成行，或与前四栏错位对不齐
- 用
.col-md-2（≈16.67%）凑 5 个，总宽仅约 83.3%，左右留白严重 - 加了
.row-cols-5但列宽仍不均——因为该类只控制“每行最多几个.col”，不改单个.col的宽度逻辑
手动添加 .col-md-1-5 类实现精确 20% 宽度
最轻量、兼容性最好的做法是写一组自定义类，复用 Bootstrap 断点命名习惯，但把 width 设为 20%：
.col-1-5 {
flex: 0 0 auto;
width: 20%;
}
@media (min-width: 576px) {
.col-sm-1-5 { width: 20%; }
}
@media (min-width: 768px) {
.col-md-1-5 { width: 20%; }
}
@media (min-width: 992px) {
.col-lg-1-5 { width: 20%; }
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 0 auto必须写，否则在.row（display: flex）中width可能被忽略 - 别依赖默认 gutter：如果用了
.g-3，需确保父.row没额外 padding 干扰，或用.gx-3单独控水平间距 - 若要支持 offset，得额外定义
.col-md-offset-20类，margin-left: 20%
用 CSS Grid 替代 .row/.col 更适合纯文本多栏
如果只是排术语、新闻条目、图标列表这类内容，不需要响应式交互逻辑，直接用 Grid 更干净：
.row-cols-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
@media (max-width: 767.98px) {
.row-cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
.row-cols-5 { grid-template-columns: 1fr; }
}
优势和注意点：
- 不卡 12 列约束，
1fr天然等分，文字换行稳定 - 断点切换可控：iPad 横屏（768px）可设为 3 列，iPhone SE（375px）退化为单列
- 但此时
.col类语义失效——别再混用.col-md-4和grid-template-columns - 若列内含图片，务必加
img { max-width: 100%; height: auto; }，否则撑破网格
升级到 Bootstrap 5 后容易漏掉的兼容细节
如果你是从 v4 升上来，.col-6 这类写法行为已变：
- v4 中
.col-6≈.col-xs-6，只在超小屏生效；v5 中它全局生效，漏写.col-md-*会导致小屏下宽度为auto（内容撑开） -
.container-fluid在 v5 默认带左右padding（由--bs-gutter-x控制），若想还原 v4 行为，得加px-0或重设 CSS 变量 -
.row虽默认display: flex，但若子项含position: absolute或图片没设max-width，等高拉伸就会失效
真正麻烦的不是让五栏显示出来，而是让它们在各种设备上不挤、不溢、不崩——这些靠的是断点对齐、内容容器的 w-100 和 text-wrap 控制，不是多加一个 class 就能解决的。
