Бутстрап сбрасывается

Я пытаюсь добавить меню выпадающего меню в раздел моих комментариев в проекте, над которым я работал.

Выпадающее меню, похоже, отключается, и я не уверен, почему это так.

Я попробовал overflow:visible and z-index:999. но никто из них, похоже, не работает.

Это основной блок комментариев, который я пытаюсь включить в раскрывающийся список

Это базовый код, который я пытаюсь выполнить

<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>

И вот как мое выпадающее меню оказывается

мультимедиа 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;
}

Ответы

Ответ 1

Проверьте, имеет ли класс мультимедиа overflow:hidden. Если это так, замените его на overflow: auto или overflow: visible.

Ответ 2

Это не идеальное решение, так как меню не будет прокручиваться с помощью целевого элемента, но я делаю это для прокрутки таблицы данных в качестве последнего средства, пока не найду альтернативу:

(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();                              
  });                                                   
})();

Это добавит меню в тело и очистит его на шкуре. Я использую jQuery UI для позиционирования, но вы можете заменить его обычным позиционированием jquery, если вы не хотите добавлять тяжелую зависимость. Вы также можете изменить $(window).on, если хотите сделать это только для ограниченного выбора выпадающих меню.

Ответ 3

Напишите вот так:

.media,
.media-body {
  overflow: visible;
}

.media:after,
.media-body:after{
 content:'';
 clear:both;
 display:block;
}

Может быть, это поможет вам.

Ответ 4

У меня была та же проблема. После добавления этих строк мое выпадающее меню работало так, как я ожидал:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}

@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

Я нашел решение здесь

Ответ 5

НОВЫЙ МЕТОД:

Просто выведите раскрывающееся меню из класса мультимедиа и используйте отрицательный запас:

 <div class="dropdown pull-right" style="margin-left:-30px">
     ...
 </div>

 <div class="media">
     ...
 </div>

Ответ 6

Получите это довольно часто на проектах, которые я наследую; имеет тенденцию быть случаем одного из родительских элементов, имеющих

overflow:hidden

Как только я уберу это, оно, кажется, будет работать как положено (если ваш дизайн не использует это свойство).