引导4小徽章旁边的大标题

Question

我正试着在一个大标题旁边得到一个小的靴带徽章。我试过的是：

<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

Answer 3

您应该使用第一个版本：

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

并在.badge上应用下列样式

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