Bootstrap的下拉菜单被挡住
发布时间:2018-01-17 13:19:57
代码
<div class="range">
<div class="dropdown" style="float:right">
<button class="btn btn-success" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
在线编辑
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>拟稿</li>
<li>附件</li>
<li>被遮盖</li>
</ul>
</div>
</div>
css
.range{
margin-bottom: -4px;
margin-right: -9px;
overflow: hidden;
}
###效果图
###原因:
因为包裹了整个下拉菜单的div的css里有:overflow:hidden;
规定当内容溢出元素框时隐藏,所以会将超出div的内容遮盖住
###解决方法:
覆盖掉下拉菜单父级元素的overflow属性:overflow:visible;
####效果图: