大标题旁边的 Bootstrap 4 小徽章

Posted 2023-03-05

【中文标题】大标题旁边的 Bootstrap 4 小徽章

【英文标题】：Bootstrap 4 small badge next to big title

【发布时间】：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

我想要什么：

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

【参考方案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 标题上有图像

有没有简单的方法来改变药丸的大小？这里的问题：***.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>