大标题旁边的 Bootstrap 4 小徽章答案

【问题标题】：Bootstrap 4 small badge next to big title大标题旁边的 Bootstrap 4 小徽章
【发布时间】：2018-03-06 11:11:47
【问题描述】：

我正在尝试在 big 标题旁边放置一个 small Bootstrap (4) 徽章。我试过的：

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

和

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

我想要什么：

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

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

类似

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

可能会成功。

【讨论】：

完美运行。

【解决方案2】：

你应该使用第一个版本：

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

【讨论】：

【解决方案3】：

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

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

输出

阅读材料

display

vertical-align

【讨论】：

除非这会与其他元素布局混淆，例如，如果您在 h2 标题上有图像
有没有简单的方法来改变药丸的大小？这里的问题：stackoverflow.com/q/64633073/5783745

【解决方案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>

【讨论】：