如何将 BootStrap Badge 拆分为多行？

Question

参考：BootStrap 徽章。

默认情况下，项目根据逗号分割。但是，按 Enter 键后，我需要将每个项目放在新行上。

Answer 1

Bootstrap 徽章是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;
}