更改引导药丸徽章的大小？答案

【问题标题】：Change the size of a bootstrap pill badge?更改引导药丸徽章的大小？
【发布时间】：2021-02-14 08:58:00
【问题描述】：

我可以使用这种方法获得pill badge（找到here & jsfiddle here）：

<span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">&nbsp;</span>

如何减小点的大小？（请注意，我尝试将 <span> 包装在 <p> 中，但这搞砸了格式并且没有改变点的大小）

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

根据documentation：

徽章通过使用相对字体大小和 em 单位来缩放以匹配直接父元素的大小。

所以如果你改变父元素的字体大小或 span 本身的字体大小，你的徽章大小也会改变

这是一个例子

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<h1>
  <span class="badge badge-pill badge-primary">&nbsp;</span>
</h1>

<h2>
<span class="badge badge-pill badge-primary">&nbsp;</span>
</h2>

<h3>
  <span class="badge badge-pill badge-primary">&nbsp;</span>
</h3>

<span class="badge badge-pill badge-primary" style="font-size: 5px;">
  &nbsp;
</span>

<span class="badge badge-pill badge-primary" style="font-size: 10px;">
  &nbsp;
</span>

<span class="badge badge-pill badge-primary" style="font-size: 15px;">
  &nbsp;
</span>

<span class="badge badge-pill badge-primary" style="font-size: 20px;">
  &nbsp;
</span>

【讨论】：

更改字体大小似乎有效，但仅在某一点上，在一定大小（仍然很大）之后，我不断减小字体大小但它不会改变大小。有什么想法吗？
我编辑了我的 sn-p，你可以看到第一个水平点变得非常小。所以我不得不假设其他东西弄乱了你的徽章。可能是徽章的内容或父元素的属性。
点肯定会响应您的 sn-p 中的 font-size。我的代码必须有一些特殊的东西覆盖它或以某种方式进行调查。我会调查的。感谢您的帮助

【解决方案2】：

我觉得你需要这样的问题。不需要任何自定义类，如果您需要更多自定义，请使用第二个示例

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


Inbox<sup><span class="badge badge-pill badge-primary">10</span></sup>

应该可以通过重写类来实现。您也可以通过编辑引导 sass 文件来做到这一点。检查它是否适合您。

.badge.badge-pill.badge-primary.pill-small {
  padding:2px;
  font-size:.5rem;
}

.badge.badge-pill.badge-primary.pill-medium {
  padding:7px;
  font-size:.75rem;
}

.badge.badge-pill.badge-primary.pill-large {
  padding:7px;
  font-size:1.5rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<span class="badge badge-pill badge-primary pill-small">2</span>

<span class="badge badge-pill badge-primary pill-medium">100</span>

<span class="badge badge-pill badge-primary pill-large">19</span>

【讨论】：

我不断减小字体大小，但在一定大小（仍然很大）之后它不会再变小了。任何想法为什么？
@stevec 可能有其他一些规则覆盖了您的规则，请尝试为您的课程添加更多特异性。