引导圆按钮

Question

我试图创建一个使用Bootstrap圆圈按钮，但它不工作，因为它应该是。下面是我在做什么：

<button type="button" class="btn btn-default btn-circle">4</button> 

而且它显示这样的结果：

我引用this网站。我的bootstrap版本是3.3.5。任何帮助？

Answer 1

只是做..

CSS

.btn-circle { 
border-radius: 50%; 
} 

Answer 2

您可以检查与下面的链接。

Fiddle

.round-button { 
    width:25%; 
} 
.round-button-circle { 
    width: 100%; 
    height:0; 
    padding-bottom: 100%; 
    border-radius: 50%; 
    border:10px solid #cfdcec; 
    overflow:hidden; 

    background: #4679BD; 
    box-shadow: 0 0 3px gray; 
} 
.round-button-circle:hover { 
    background:#30588e; 
} 
.round-button a { 
    display:block; 
    float:left; 
    width:100%; 
    padding-top:50%; 
    padding-bottom:50%; 
    line-height:1em; 
    margin-top:-0.5em; 

    text-align:center; 
    color:#e2eaf3; 
    font-family:Verdana; 
    font-size:1.2em; 
    font-weight:bold; 
    text-decoration:none; 
} 

Answer 3

尝试：<button type="button" class="btn btn-circle btn-default">4</button>