温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Icon in top Corner using Bootstrap 4

其他 - 使用Bootstrap 4的右上角的图标

发布于 2020-03-29 12:52:19

嗨,我正在尝试在跨度的右上角添加一个图标。

但我无法弄清楚。

有人可以帮忙吗?

<div class="tagset">
<span class="badge badge-grey">User <i class="fas fa-user"></i></span>
<span class="badge badge-grey">Add Me <i class="fas fa-plus"></i></span>
<span class="badge badge-grey">Loss Me <i class="fas fa-minus"></i></span>
</div>

寻找类似下图的内容:

在此处输入图片说明

查看更多

查看更多

提问者
Stephen Cossgrove
被浏览
27
mahan 2020-01-31 16:20

Boostrap-4确实有.classes这种情况。因此,您需要编写一些自定义CSS。

使用postion:relative.badge元素和 postion:absolute上的图标。

.badge {
  display: inline-block;
  margin: auto 10px;
  padding: 10px 30px !important;
}

.fas {
  padding: .2rem .3rem;
  position: absolute;
  /* You may need to change top and right. They depend on padding/widht of .badge */
  top: -10px;
  right: -10px;
  background: green;
  border-radius: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tagset mt-5">
  <span class="badge bg-primary position-relative">User <i class="fas fa-user"></i></span>
  <span class="badge bg-primary position-relative">Add Me <i class="fas fa-plus"></i></span>
  <span class="badge bg-primary position-relative">Loss Me <i class="fas fa-minus"></i></span>
</div>

如果您需要更多信息,请阅读此CSS技巧文章

发布
问题

分享
好友

手机
浏览

扫码手机浏览