更改引导药徽章的大小？

时间：2020-11-01 14:38:08

标签： twitter-bootstrap bootstrap-4

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

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

enter image description here

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

2 个答案:

答案 0 :(得分：1)

根据documentation：

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

因此，如果您更改父元素的字体大小或跨度本身的字体大小，则您的徽章大小也会更改

这是一个例子

2.3.0

答案 1 :(得分：1)

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

enter image description here 

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

应该可以通过重写类来实现。您也可以通过编辑bootstrap 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>

相关问题
最新问题