Bootstrap thả xuống cắt

Question

Tôi đang cố thêm một menu cài đặt thả xuống vào phần bình luận của tôi trong một dự án mà tôi đang làm việc.

Trình đơn thả xuống dường như tự cắt và tôi không chắc tại sao lại như vậy.

Tôi đã thử overflow:visible and z-index:999. nhưng không ai trong số họ có vẻ làm việc.

Đây là một khối bình luận cơ bản mà tôi đang cố gắng để bao gồm một danh sách thả xuống trong

Đây là mã cơ bản mà tôi đang cố gắng để thực hiện

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

Và đây là cách trình đơn thả xuống của tôi là quay ra là

phương tiện truyền thông 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; 
} 

Answer 1

Kiểm tra xem lớp phương tiện có overflow:hidden hay không. Nếu có, hãy thay thế bằng overflow: auto hoặc overflow: visible.

Answer 2

Viết như thế này:

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

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

Có thể đó là sự giúp đỡ bạn.

Answer 3

MỚI PHƯƠNG PHÁP:

Chỉ cần mang trình đơn thả xuống bên ngoài lớp học truyền thông và sử dụng một biên độ tiêu cực:

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

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

Answer 4

Đây không phải là một giải pháp lý tưởng như menu sẽ không di chuyển với các phần tử mục tiêu, nhưng tôi đang làm điều này cho một bảng dữ liệu di chuyển như một phương sách cuối cùng cho đến khi tôi có thể tìm thấy một giải pháp thay thế:

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

Thao tác này sẽ thêm menu vào cơ thể và dọn dẹp. Tôi đang sử dụng giao diện người dùng jquery để định vị nhưng bạn có thể thay thế nó bằng định vị jquery thông thường nếu bạn không muốn thêm phụ thuộc nặng nề. Bạn cũng có thể muốn thay đổi $(window).on nếu bạn chỉ muốn thực hiện việc này với một số menu thả xuống giới hạn.

Answer 5

Nhận điều này khá thường xuyên đối với các dự án mà tôi thừa hưởng; có xu hướng là một trường hợp của một trong một trong các yếu tố cha mẹ có

overflow: hidden

Khi tôi loại bỏ điều này có vẻ như để làm việc như mong đợi (miễn là thiết kế của bạn không dựa vào tài sản này).

Answer 6

Tôi gặp vấn đề tương tự. Sau khi thêm dòng này, thả xuống của tôi làm việc cũng giống như tôi mong đợi:

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

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

Tôi tìm thấy giải pháp here