如何使用不同属性（CSS）的圆来适应颜色？

Question

我有一个CSS属性圈像这样：

.btn-circle { 
    color: #fff; 
    background: #5191d1; 
    width: 60px; 
    height: 60px; 
    padding: 18px 0; 
    font-size: 24px; 
    border-radius: 50%; 
    display: block; 
    margin: 0 auto; 
    margin-bottom: 6px; 
    line-height: normal; 
    transition: all .3s ease-in-out 0s; 
} 

而且我想创建不同的CSS属性来选择按钮的颜色。例如：

.bg-blue { 
    background-color: #5191d1 !important; 
    border-color: #269abc; 
} 

// also bg-red, bg-yellow, etc... 

使用 “BTN圈BG-蓝”，我的网页结束这样的时候的问题是：

的这个代替：

由于父属性（col-md-4）的问题吗？我能做什么？

谢谢。

Answer 1

我用你的CSS和它的工作。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<style> 
 
    .btn-circle { 
 
    color: #fff; 
 
    background: #5191d1; 
 
    width: 60px; 
 
    height: 60px; 
 
    padding: 18px 0; 
 
    font-size: 24px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 6px; 
 
    line-height: normal; 
 
    transition: all .3s ease-in-out 0s; 
 
    } 
 
    .bg-blue { 
 
    background-color: #5191d1 !important; 
 
    border-color: #269abc; 
 
    } 
 
</style> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <a class="btn btn-circle bg-blue"><i class="glyphicon glyphicon-calendar"></i> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

这将是更清晰，达到这个问题的根本原因，如果你会提供的HTML代码。

假设类“btn-circle bg-blue”的div元素在父div内。确保parent div的背景色与圆形div（子）的不同。

例如（正确的代码）：

.btn-circle { 
 
    color: #fff; 
 
    background: #5191d1; 
 
    width: 60px; 
 
    height: 60px; 
 
    padding: 0px 0; 
 
    font-size: 24px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 6px; 
 
    line-height: normal; 
 
    transition: all .3s ease-in-out 0s; 
 
} 
 
.bg-blue { 
 
    background-color: #5191d1 !important; 
 
    border-color: #269abc; 
 
} 
 
.bg-orange { 
 
    background-color: #FFD185; 
 
}

<div class="bg-orange"> 
 
    <div class="btn-circle bg-blue"> 
 
    </div> 
 
</div>

而错误的代码，会出现这样的：

.btn-circle { 
 
    color: #fff; 
 
    background: #5191d1; 
 
    width: 60px; 
 
    height: 60px; 
 
    padding: 0px 0; 
 
    font-size: 24px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 6px; 
 
    line-height: normal; 
 
    transition: all .3s ease-in-out 0s; 
 
} 
 

 
.bg-blue { 
 
    background-color: #5191d1 !important; 
 
    border-color: #269abc; 
 
} 
 
.bg-orange { 
 
    background-color: #FFD185; 
 
}

<div class="bg-blue"> 
 
    <div class="btn-circle bg-blue"> 
 
    </div> 
 
</div>