如何在多行上拆分BootStrap徽章？

Question

参考：BootStrap badge。

默认情况下，会根据逗号分割项目。然而，在按下输入时，我需要将每个项目放在新行上。

Answer 1

Bootstrap badges是span元素，这意味着它们默认显示为inline。如果要在新行上显示顺序标记，则可以将它们包装在块元素中，例如div：

<div>
    <span class="badge badge-secondary">Badge 1</span>
</div>
<div>
    <span class="badge badge-secondary">Badge 2</span>
</div>

或应用自己的风格：

HTML：

<span class="badge badge-secondary block-badge">Badge 1</span>
<span class="badge badge-secondary block-badge">Badge 1</span>

CSS：

.badge.block-badge {
    display: block;
}