在菜单上放置 Bootstrap 徽章
Posted
技术标签:
【中文标题】在菜单上放置 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;
【讨论】:
为我工作 :::)以上是关于在菜单上放置 Bootstrap 徽章的主要内容,如果未能解决你的问题,请参考以下文章
如何更改 React-Bootstrap NavDropdown 菜单背景颜色?