Html Bootstrap 4大标题旁的小徽章

我正试图在一个大头衔旁边得到一个小的Bootstrap 4徽章。我所尝试的：

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

及

我想要的是：

实现这一点最简单的方法是什么

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

---

可能会成功。

您应该使用第一个版本：

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

---

更干净的方法是使用已提供的Bootstrap 4实用程序类：

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

输出

阅读材料

---

除了公认的答案，如果您使用引导，还可以使用css文本小、文本中或文本大来控制徽章的大小。例如：

产品 版本1

---

效果很好。除了这会干扰其他元素的布局，例如，如果你在h2标题上有一个图像，有没有一个简单的方法来改变药丸的大小？问题:

font-size: 10px;
vertical-align: top;
top: 10px; //depends on your font-size
position: relative;

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