將引導轉盤指示器設置爲點

這裏的bootstrap noob的位，我試圖將引導程序中的轉盤指示符設置爲點而不是默認的矩形。我有旋轉木馬的工作，我想通過訪問作爲如此改變通過CSS指標：將引導轉盤指示器設置爲點

.carousel-indicators li { 
    border-radius: 50%; 
    height: 30px; 
    width: 30px; 

}

輸出並建立社交圈，like so，但圈子太大，所以我嘗試改變代碼是：

.carousel-indicators li { 
    border-radius: 50%; 
    height: 10px; 
    width: 10px; 

}

，而是圓圈越來越小的，（至少我假定這就是應該發生。）他們最終看起來更像是this。我似乎無法找到解決此問題的方法。有沒有人知道如何用CSS或其他方式解決這個問題，而不是使用矩形指示符？非常感激！

來源

2017-04-22 Eric Parsons

像這樣編輯標籤元素;

nav.carousel label { 
    display: inline-block; 
    background: #FFFFFF; 
    overflow: hidden; 
    text-indent: -999px; 
    border-radius: 100%; 
    width: 20px; 
    height: 20px; 
    box-shadow: inset 0 1px 1px 0 #999; 
}

隱藏單選按鈕;

nav.carousel input[type=radio] { 
    display: none; 
} 

nav.carousel:hover { 
    cursor: default; 
} 
nav.carousel label:hover { 
    background: #bbb; 
    cursor: pointer; 
    box-shadow: inset 0 1px 1px 0 #777; 
} 
nav.carousel input:checked + label { 
    background: linear-gradient(#FFFFFF, #bc1414); 
    box-shadow: inset 0 0 1px 1px #FFFFFF; 
}

並使用像這樣;

<nav class="carousel"> 
    <input id="item1" type="radio" name="dot" checked> 
    <label for="item1">item 1</label> 

    <input id="item2" type="radio" name="dot"> 
    <label for="item2">item 2</label> 
</nav>

您可以根據需要更改寬度和高度。你可以查看工作示例;

https://jsfiddle.net/rnz9w1zz/?utm_source=website&utm_medium=embed&utm_campaign=rnz9w1zz

來源

2017-04-22 22:27:23

將引導轉盤指示器設置爲點

回答

相關問題