如何在Bootstrap 5中利用CSS网格系统实现自定义5列布局-css教程-PHP中文网

bootstrap 5 不支持 col-5，因其栅格基于12列体系且5非12因数；应使用 row-cols-5 作用于 .row 实现每行5列均分，子元素仅需 .col 类，响应式可写为 row-cols-md-5 row-cols-2。

如何在bootstrap 5中利用css网格系统实现自定义5列布局

Bootstrap 5 原生不支持 `col-5`，别试了

Bootstrap 5 的栅格基于 12 列体系，col-* 类只生成 1–12 的整数列宽（如 col-3 = 25%，col-4 = 33.33%）。5 不是 12 的因数，所以 col-5 或 col-md-5 这类写法**不会生效**——浏览器直接忽略，元素退化为单列堆叠或按默认 flex 行为错位。强行用 col-2 × 5 会占满 10/12 宽度，留白；col-3 × 5 则超限换行。这不是 bug，是设计使然。

用 `row-cols-5` 是最轻量、语义最正的解法

这个类直接作用于 .row，告诉它“每行强制显示 5 列”，子元素无论数量多少，都均分宽度（各占 20%），且自动处理 flex 主轴对齐和断点响应。

实操要点：

row-cols-5 必须加在 .row 上，不是子 .col；子元素只需带 .col 即可（哪怕只写一个 class="col"）
响应式写法如 row-cols-md-5 row-cols-2：小屏 2 列，中屏起 5 列
内容过长或含图片时可能撑破列宽，需额外加 style="min-width: 0" 或自定义 CSS 控制溢出
它不影响子 .col 内部嵌套，比如 <div class="col"><div class="col-md-6">...</div></div> 依然有效

<div class="row row-cols-5">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
  <div class="col">E</div>
</div>

用自定义 CSS Grid 替换 row 的 display 行为

当需要严格控制列宽为 20%、同时保留 gutter 和响应式行为时，绕过 Bootstrap 栅格、直接用 CSS Grid 更可控。关键是重置 .row 的 display，并定义列轨道。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐做法：

给 .row 添加自定义类（如 grid-5-cols），避免污染全局
必须显式设置 gap（对应 Bootstrap 的 gutter），否则列之间无间距
用 grid-template-columns: repeat(5, 1fr) 实现真正等分，比 20% 更健壮（自动处理剩余空间）
如果要响应式，用媒体查询切换 repeat() 参数，例如 @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }

.grid-5-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .grid-5-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}