Html Bootstrap 4大标题旁的小徽章

我想在一个大头衔旁边得到一个小的引导徽章。我所尝试的：

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

产品版本1

及

产品>
版本1类似于

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


产品
版本1

可能会成功。
您应该使用第一个版本：

<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>

产品
版本1

输出


阅读材料


除了公认的答案外，如果您使用引导，还可以使用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>