引导下拉切断 [英] Bootstrap drop down cutting off
本文介绍了引导下拉切断的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在我正在处理的项目中的评论部分中添加下拉菜单。
I am trying to add a dropdown setting menu to my comments section in a project that I've been working on.
下拉菜单似乎自动关闭
我尝试了 overflow:visible和z-index:999
。但它们都不工作。
I tried overflow:visible and z-index:999
. but none of them seem to work.
这是一个基本的注释块,我试图在
This is a basic comment block that I am trying to include a dropdown in
这是我试图实现的基本代码
This is the basic code that I am trying to Implement
<div class="media">
<a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a>
<div class="dropdown pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;">
<b data-icon=""></b> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
<div class="media-body">
<h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4>
<p>
Main body of the comment
</p>
</div>
</div>
这是我的下拉菜单是如何变成
And this is how my dropdown menu is turning out to be
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media .pull-left {
margin-right: 10px;
}
.media .pull-right {
margin-left: 10px;
}
.media-list {
margin-left: 0;
list-style: none;
}
推荐答案
检查媒体类是否 overflow:hidden
。如果是,请将其替换为 overflow:auto
或 overflow:visible
。
Check whether media class is has overflow:hidden
. If so, replace it with overflow: auto
or overflow: visible
.
这篇关于引导下拉切断的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文