Bootstrap 3 : 增加徽章尺寸

Question

根据 bootstrap 4，如果您使用标题标签包围跨度，徽章会根据文档中提到的标题调整大小。

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

https://getbootstrap.com/docs/4.4/components/badge/

但是，我有 bootstrap 3，它似乎不支持这种行为。 bootstrap 3 中有什么方法可以增加徽章的大小吗？

Answer 1

.badge-parent>span{
  font-size:3rem;
}

<h1 class="badge-parent">
  <span class="badge badge-primary">Span</span>
</h1>

Answer 2

不需要肮脏的习俗CSS。看看.label。 BS3 相当于 BS4

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

依此类推

<h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5>

演示 -> http://jsfiddle.net/5sL7ny2w/

Bootstrap 3 : 增加徽章尺寸

Bootstrap 3 : Increase size of badge

twitter-bootstrap

twitter-bootstrap-3