Bootstrap 圓形按鈕

Question

我正在嘗試使用Bootstrap創建圓形按鈕，但它無法正常工作。 這是我在做什么：

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

它顯示的結果是這樣的：

我參考了這個網站。 我的bootstrap版本是3.3.5 。 有什么幫助嗎？

Answer 1

就這樣做..

CSS

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

Answer 2

您可以通過以下鏈接進行檢查。

小提琴

    .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>

Answer 4

您可以使用此代碼：

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