2013-05-10 49 views
0

我有一个引导按钮,我希望有一个数字的泡泡,就像在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; 
} 

但它似乎并没有工作。

任何意见将不胜感激。

干杯

+1

这里不是问题,但如果你想要定位类'notification',你需要在你的类属性'class =“通知中删除逗号,红色''应该是'class =”通知红色“ – scrappedcola 2013-05-10 22:10:30

回答

2

的问题是与你的CSS声明:

.btn.span 

(将适用风格与 'BTN' 类和所有元素'span'级)。

<div class="btn span" /> 

你要这个:

.btn span 

(这将样式的所有span S中的与“BTN”类元素的后代。)

1

是,.btn跨度的CSS正确的语法因为span是一个HTML标记。使用span之前的时间段表明它是一个css类,事实并非如此。