CSS Bootstrap 下拉切断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14473769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap drop down cutting off
提问by Jonathan
I am trying to add a dropdown setting menu to my comments section in a project that I've been working on.
我正在尝试将下拉设置菜单添加到我一直在从事的项目中的评论部分。
The dropdown menu seems to cut itself off and I am not sure why is that the case.
下拉菜单似乎自己切断了，我不知道为什么会这样。
I tried overflow:visible and z-index:999. but none of them seem to work.
我试过了overflow:visible and z-index:999。但它们似乎都不起作用。
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 CSS
媒体 CSS
.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;
}
回答by Nick Perez
This is not an ideal solution as the menu will not scroll with the target element, but I'm doing this for a scrolling data table as a last resort until I can find an alternative:
这不是一个理想的解决方案，因为菜单不会随目标元素一起滚动，但我正在为滚动数据表执行此操作作为最后的手段，直到我找到替代方案：
(function() {
var dropdownMenu;
$(window).on('show.bs.dropdown', function(e) {
dropdownMenu = $(e.target).find('.dropdown-menu');
$('body').append(dropdownMenu.detach());
dropdownMenu.css('display', 'block');
dropdownMenu.position({
'my': 'right top',
'at': 'right bottom',
'of': $(e.relatedTarget)
})
});
$(window).on('hide.bs.dropdown', function(e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
This will append the menu to the body and clean it up on hide. I'm using jquery UI for positioning but you can replace it with regular jquery positioning if you don't want to add the heavy dependency. You may also want to alter $(window).onif you only want to do this to a limited selection of dropdowns.
这会将菜单附加到正文并在隐藏时清理它。我正在使用 jquery UI 进行定位，但如果您不想添加严重的依赖项，则可以将其替换为常规的 jquery 定位。$(window).on如果您只想对有限的下拉列表执行此操作，您可能还想更改。
回答by Gopikrishna
Check whether media class is has overflow:hidden. If so, replace it with overflow: autoor overflow: visible.
检查媒体类是否有overflow:hidden。如果是这样，请将其替换为overflow: auto或overflow: visible。
回答by sandeep
Write like this:
像这样写：
.media,
.media-body {
overflow: visible;
}
.media:after,
.media-body:after{
content:'';
clear:both;
display:block;
}
May be that's help you.
也许这对你有帮助。
回答by Jorge Casariego
I had the same problem. After adding this lines, my dropdown worked just as I expected:
我有同样的问题。添加此行后，我的下拉菜单按预期工作：
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: visible;
}
}
I found the solution here
我在这里找到了解决方案
回答by hjahan
NEW METHOD:
新方法：
Just bring drop down menu out of media class and use a negative margin:
只需将下拉菜单带出媒体类并使用负边距：
<div class="dropdown pull-right" style="margin-left:-30px">
...
</div>
<div class="media">
...
</div>
回答by Wellso
Get this quite often on projects I inherit; tends to be a case of one of the parent elements having
在我继承的项目中经常得到这个；往往是父元素之一具有的情况
overflow:hidden
Once I remove this it seems to work as expected (as long as your design doesn't rely on this property).
一旦我删除它，它似乎会按预期工作（只要您的设计不依赖于此属性）。
