html - 如何在具有不同属性(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-circle bg-blue”时，我的页面如下所示结束：



代替这个：



问题是由于父属性（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>