2017-04-06 62 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; 
    } 
}