2017-04-06 53 views
0

甲使用通常在自舉下拉列表被標記爲能按鈕引導下拉菜單,而不是錨

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    </ul> 
</div> 

其中下拉的項目是錨標籤。

有些時候,雖然下拉菜單項需要作爲button,但它的確如此,不是,但在頁面上執行某些功能。

是否有任何默認的支持來執行以下操作,而不會破壞它如何呈現?我應該使用不同的課程嗎?或者我應該複製應用於.dropdown-menu > li > a的樣式並將其應用於.dropdown-menu > li > button樣式?

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><button class="btn btn-default">Another action</button></li> 
    </ul> 

雖然我知道我可以修改錨標記執行preventDefault()好像錯了標籤,也使瀏覽器顯示網址,如果它是導航。按鈕不像這樣。

回答

0

所以,雖然我沒有找到一個內置的方式讓按鈕在下拉菜單中正確顯示樣式,但明確地將樣式設置爲匹配。將以下內容添加到我的css文件中。

.dropdown-menu { 

    > li > button { 
     display: block; 
     border: 0; 
     border-radius: 0; 
     padding: 3px 20px; 
     clear: both; 
     font-weight: normal; 
     line-height: 1.42857143; 
     color: #333; 
     white-space: nowrap; 
    } 

} 

.dropdown-menu > li > button { 
    &:hover, 
    &:focus { 
     text-decoration: none; 
     color: #262626; 
     background-color: #f5f5f5; 
    } 
}