我有一个 Bootstrap 按钮,我希望在该按钮上有一个带有数字的气泡,就像出现在 iPhone 应用程序图标上的通知一样。
我对按钮的标记是:
<button class="btn btn-warning view-sl-btn" type="button"><span class="notification, red">6</span>View Shortlist</button>
span 的 Css 是:
.btn.span {
position: absolute;
background-color: #f56c7e;
border: 1px solid #ce4f5e;
padding: 2px 5px 1px;
margin-left: -2px;
margin-top: -16px;
border-radius: 100px;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
font-size: 11px;
-webkit-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
-moz-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
-o-box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
box-shadow: inset 0px 1px 2px rgba(255,255,255,0.4);
}
.btn.span.red {
background-color: #f56c7e;
border-color: #ce4f5e;
}
但是好像不行。
任何建议将不胜感激。
干杯
最佳答案
问题出在您的 CSS 声明上:
.btn.span
(将样式应用于具有“btn”类和“span”类的所有元素。)
<div class="btn span" />
你想要这个:
.btn span
(这将设置所有 span
的样式,这些 span
是具有“btn”类的元素的后代。)
关于html - 跨度不适用于 Bootstrap 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16491405/