大标题旁边的 Bootstrap 4 小徽章

Question

我正在尝试在 大 标题旁边添加一个 小 的 Bootstrap (4) 徽章。我试过的：

 <h1>Product <span class="badge badge-primary">Version 1</span></h1>

和

<h1>Product></h1>
<span class="badge badge-primary">Version 1</span

我想要的是：

实现这一目标的最简单方法是什么？

原文由 Thomas Wagenaar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

就像是

<div>
  <h1 style="display: inline-block">Product</h1>
  <span class="badge badge-primary" style="vertical-align: top">Version 1</span>
</div>

可能会成功。

原文由 AKX 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一种更简洁的方法是使用已提供的 Bootstrap 4 实用程序类：

 <h2 class="h3 d-inline-block">Product</h2>
<span class="badge badge-primary align-top">Version 1</span>

输出

阅读材料

display

vertical-align

原文由 Orphaned Record 发布，翻译遵循 CC BY-SA 3.0 许可协议