大标题旁边的Bootstrap 4小徽章

Question

我正在尝试在 big 标题旁边找到小 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

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

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

<强>输出

阅读材料

display

vertical-align

Answer 2

像

这样的东西

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

可能会成功。

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;

Answer 4

除了接受的答案外，如果您使用的是Bootstrap，还可以使用CSS的“ text-small”，“ text-medium”或“ text-large”来控制标志的大小。示例：

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