引導圓按鈕

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>