Question

正如标题所暗示的那样，我有一个带有bootstrap class =＆＃34; column＆＃34;并且我试图用一些跨度元素填充它。这个跨度元素没有固定数字的通知。
我的列有一个固定的宽度但是跨度可以分成多个行。如果有太多元素或用户放大，则跨度将以多行显示。
这是一个棘手的部分：我希望每一行的跨度都能拉伸并填充线。可能吗？我试过stayle =＆＃34;显示：flex＆＃34;但是，如果它们太多，flex会使跨度变得不合适。（对不起，我没有小提琴，因为代码有点混乱和复杂）这是＆lt;＆gt;的演示是跨度和空格：

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

Answer 1

是的，这是可能的。

您将span放在包含text-align:justify的列中，并提供span个元素display:inline-block。

使最后一行元素正确对齐的技巧是在列上使用:after伪元素并为其提供以下代码：

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

这实质上会强制创建另一条线，因此上一行 - span的最后一行将被证明是合理的。

这是一个工作小提琴： https://jsfiddle.net/3kem9asp/3/

编辑：我将inline-block更改为：after伪元素，以清除最后一行。

使用具有多行动态数的多个span元素填充bootstrap列

1 个答案: