通过 css `counter-reset` 和 `counter-increment` 配合 `::before` 伪元素，可无需 javascript 即为每个 bootstrap `.row` 自动添加递增序号（如“1.”、“2.”），完美适配响应式布局。
在 Bootstrap 中为每行内容添加动态序号（如 1. content...、2. content...）时，推荐使用原生 CSS 计数器（CSS Counters）——它语义清晰、性能优异、完全脱离 JavaScript，且与 Bootstrap 的 .row/.col 结构天然兼容。
✅ 实现原理简述
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>
/* 步骤1：在 container 上重置计数器 */
.container.counter {
counter-reset: section;
}
/* 步骤2：为每个 .row 增加计数 */
.container.counter .row {
counter-increment: section;
}
/* 步骤3：在 .col 内容前插入编号（支持样式定制） */
.container.counter .col::before {
content: counter(section) ".";
font-weight: bold;
color: #0d6efd;
margin-right: 0.5rem;
/* 可选：确保编号与文本对齐 */
display: inline-block;
width: 2rem;
text-align: right;
}
</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 上设置递增；
- 响应式兼容性：该方案完全基于 CSS，与 Bootstrap 的栅格断点（col-md-6 等）无冲突，编号始终按 DOM 顺序生成；
- 可扩展性：如需多级编号（如 1.1, 1.2），可叠加 counter-reset 和 counter(section sub) 实现；
-
无障碍友好：纯视觉编号不被屏幕阅读器识别；若需语义化序号，建议结合
- +
- 结构或添加 aria-label。
✅ 总结
使用 CSS 计数器为 Bootstrap 行添加动态序号，是轻量、高效、可维护的最佳实践。它不依赖框架扩展、不增加 JS 负担，且易于定制样式与起始值（例如 counter-reset: section 10; 从 10 开始）。对于内容列表、步骤说明、FAQ 排序等场景，此方案兼具实用性与专业性。
