Bootstrap的下拉菜单被挡住

jarisMA

于 2019-08-27 17:55:17 发布

阅读量6.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css bootstrap

本文链接：https://blog.youkuaiyun.com/jarisMA/article/details/100105539

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文介绍了在使用Bootstrap时遇到下拉菜单被遮挡的问题，分析了原因是由于父级div设置了`overflow:hidden`导致的。提供了解决方法，即通过CSS覆盖父级元素的overflow属性，从而显示完整下拉菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

####效果图：