Twitter bootstrap 3 按钮是否可以用于引导下拉列表而不是锚定
引导中的典型下拉列表标记为Twitter bootstrap 3 按钮是否可以用于引导下拉列表而不是锚定,twitter-bootstrap-3,Twitter Bootstrap 3,引导中的典型下拉列表标记为 <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
<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>
虽然我知道我可以修改锚点标记以执行
preventDefault()
,但它似乎是错误的标记,并且会导致浏览器显示Url,就像它正在导航一样。按钮的行为与此不同。因此,虽然我没有在下拉列表中找到使按钮正确设置样式的内置方法,但还是显式地将样式设置为匹配。将以下内容添加到我的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;
}
}
.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;
}
}