span不能在Bootstrap按钮上工作

时间:2013-05-10 22:02:19

标签: css html5 css3 twitter-bootstrap

我有一个引导按钮,我想要一个带有数字的气泡,就像iphone中的应用程序图标上显示的通知一样。

按钮的标记是:

<button class="btn btn-warning view-sl-btn" type="button"><span class="notification, red">6</span>View Shortlist</button>

跨度的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;
}

但它似乎不起作用。

非常感谢任何建议。

干杯

3 个答案:

答案 0 :(得分:2)

问题在于您的CSS声明:

.btn.span

(将样式应用于具有'btn'类和'span'类的所有元素。)

<div class="btn span" />

你想要这个:

.btn span

(这会将所有span作为带有'btn'类的元素的后代的样式。)

答案 1 :(得分:1)

请改用以下内容

.btn span

答案 2 :(得分:1)

是的,.btn span是css的正确语法,因为span是一个HTML标记。跨度之前的时段的使用将表明它是一个css类,它不是。