通过 css `counter-reset` 和 `counter-increment` 配合 `::before` 伪元素，可无需 javascript 即为每个 bootstrap `.row` 自动添加递增序号（如“1.”“2.”），实现语义化、可维护的有序内容展示。
在 Bootstrap 布局中，若需为每行内容（.row）添加自动编号（如 1. content...、2. content...），推荐使用原生 CSS 计数器（CSS Counters）——它轻量、高效、语义清晰，且完全脱离 JavaScript，兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥16）。
✅ 实现原理简述
CSS 计数器基于三个核心属性：
- counter-reset：在指定容器上初始化计数器（如 section）；
- counter-increment：在目标元素上使计数器自增；
- content: counter(name)：在 ::before 或 ::after 中插入当前计数值。
✅ 完整实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
/* 初始化计数器：在 .container.counter 内重置 section 计数器 */
.container.counter {
counter-reset: section;
}
/* 每个 .row 出现时，section 计数器 +1 */
.container.counter .row {
counter-increment: section;
}
/* 在每个 .col 前插入编号（如 "1."、"2."）*/
.container.counter .col::before {
content: counter(section) ".";
font-weight: bold;
margin-right: 0.5rem;
color: #0d6efd; /* Bootstrap primary 蓝色 */
}
</style>
</head>
<body>
<div class="container counter mt-4">
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
<div class="row">
<div class="col">
content will appear here
</div>
</div>
</div>
</body>
</html>⚠️ 注意事项
- 避免嵌套干扰：若 .row 内部存在其他 counter-increment 元素，可能影响编号逻辑；建议仅在顶层 .row 上应用 counter-increment。
- 语义化考量：纯视觉编号不适用于屏幕阅读器。如需无障碍支持，应额外添加 <ol><li> 结构或使用 aria-label（例如：<div class="col" aria-label="第1项：content will appear here">）。
- 样式隔离：.counter 类确保仅对特定容器启用计数，避免全局污染；可按需扩展为多个独立计数器（如 counter-reset: section subsection）。
- Bootstrap 版本兼容性：该方案兼容 Bootstrap 4/5/6，因仅依赖通用类名（.row, .col），与内部实现解耦。
✅ 进阶提示
如需编号后接空格而非点号（如 1 content...），将 content: counter(section) "."; 改为 content: counter(section) " ";；若需起始编号非 1，可在 counter-reset 中指定初值：counter-reset: section 10;（则首行为 11.）。
此方法简洁、健壮、无 JS 依赖，是为 Bootstrap 行添加动态序号的最佳实践之一。
立即学习“前端免费学习笔记（深入）”；
