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

zzlelutf 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(134)

我正在使用 Bootstrap 网格系统，并希望添加前缀号码每行，这将基本上显示的数字每行。列表1，2，3，4。我该如何实现这一点？
预期输出：

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>

css

来源：https://stackoverflow.com/questions/75286137/how-can-i-apply-ordered-list-number-to-each-row-dynamically-to-bootstrap-rows

1条答案

按热度按时间

g2ieeal71#

https://developer.mozilla.org/en-US/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>

赞(0）回复(0）举报 2023-02-01

我来回答

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

1条答案

相关问题

热门标签

最新问答