我如何动态地将有序列表编号应用于每一行以引导行

Question

我正在使用 bootstrap 网格系统，并想为每一行添加前缀编号，这基本上会显示每一行的编号。 列出 1、2、3、4。我怎样才能做到这一点？

所需的 output：

1. content will appear here
2. content will appear here
3. content will appear here
4. content will appear here

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <div class="container"> <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>

Answer 1

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters

 .container.counter { counter-reset: section; }.container.counter.row { counter-increment: section; }.container.counter.col::before { content: counter(section) "."; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <div class="container counter"> <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>