html - 跨度不适用于 Bootstrap 按钮

标签 html css twitter-bootstrap

我有一个 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/

相关文章:

css - div 中的 div 的高度与父级不同。为什么?

css - 表 vs Div vs 跨度

twitter-bootstrap - 如何让 Bootstrap 图标在深色背景下工作?

html - div 或 span 内的链接不起作用?

html - 如何垂直对齐div?

html - 如何仅使用 CSS 在 <a> 元素内添加图标

html - 按钮文本未正确放置

html - 合并的 Colspan 中的字体大小导致其他行中的列宽发生变化

twitter-bootstrap - 您可以在 Bootstrap 2.3 中使用面板吗

twitter-bootstrap - 从 Angular Controller 关闭 Twitter Bootstrap 模式