引导下拉切断 [英] 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="&#xe001;"></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屋！