大标题旁边的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

我想要的是:

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

Answer 1

就像是

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

可能会做的伎俩.

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