在菜单上放置 Bootstrap 徽章

Posted 2023-03-14

【中文标题】在菜单上放置 Bootstrap 徽章

【英文标题】：Position Bootstrap badge on menu

【发布时间】：2018-12-06 23:31:09

【问题描述】：

我正在尝试像下一张图片一样放置我的 Bootstrap 徽章：

但这就是我得到的：

我做错了什么？或者我可以在我的 CSS 中添加什么？

这是我的代码：

<div class="col-md">
  <a class="navbar-brand" href=" route('user.cart') "><i class="fas fa-shopping-cart"></i></a>
  <span class="badge badge-pill badge-warning"> Session::has('cart') ? Session::get('cart')->totalQty : '' </span>
  <span class="sr-only">(current)</span></a>
</div>

【参考方案1】：

试试这个

<div class="col-md">
  <a class="navbar-brand" href=" route('user.cart') ">
    <i class="fas fa-shopping-cart"></i>
    <span class="badge badge-pill badge-warning count-notif"> Session::has('cart') ? Session::get('cart')->totalQty : '' </span>
    <span class="sr-only">(current)</span>
  </a>
</div>

在css中添加这个

.count-notif
  vertical-align:middle;
  margin-left:-15px;
  margin-top: -20px;
  font-size:13px;


.badge-warning
  padding:3px;

【讨论】：

为我工作 :::)