Html 用多行中具有动态编号的多个跨度元素填充引导列

正如标题所示，我有一个带有bootstrap class=“column”的div，我正试图用一些span元素填充它。请注意，这个span元素没有固定的数字。
“我的列”具有固定宽度，但跨距可以分成多行。因此，如果元素太多或用户放大，跨距将显示为多行。
这里有一个棘手的部分：我希望每一行中的跨距都能延伸并填满这一行。可能吗？我尝试了stayle=“display:flex”，但如果跨距过大，flex会使跨距偏离直线。 （对不起，我没有小提琴，因为代码有点凌乱和复杂） 下面是一个演示，其中包括跨度和空间：

|---------------------------|
|<aaaaaaaaa><ddddddddd><fff>|
|<sdf><sdfsd><sdf ><sdfsdf >|
|<   sd   ><   sdf   >< sd >|
|---------------------------|

|---------------------------|
||
||
||
|---------------------------|

是的，这是可能的

您将

span

s放置在一列中，其中

text align:justify

并给出

span

元素

显示：内联块

使最后一行的元素正确对齐的诀窍是在列的伪元素之后使用一个

：并给它以下代码：

.col:after {
  content: "";
  display:table;
  width: 100%;
}

这实际上是强制创建另一行，因此前一行-span

s的最后一行将被对齐

这是一把小提琴：

---

编辑：我将：after伪元素的内联块更改为table，以清除最后一行。

谢谢，但这并不是我想要的。我的跨距有背景色（每个跨距不同），我需要它们来填充列（因此没有看到白色背景）。抱歉，我编辑了答案。很明显，我想写点别的，我刚醒来：）谢谢：）这本很好用。有没有一种方法可以使跨距拉伸，这样跨距之间就没有空间了？我不知道我是否理解你的意思…不可能让内容完全适合。我还在跨距中添加了一些填充，也许你想删除它？除非你指的是别的。。？编辑：更新了小提琴，现在检查？例如，在最后一行中有5个跨距，我希望它们覆盖它们所在的所有线条。因此，如果它们有背景色，比如说#777，几乎所有线条都将有该颜色，而不是白色。