Bootstrap的下拉菜单被挡住

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;

####效果图：