overflow:hidden
。
此处提供完整代码片段:jsfiddle
因此,我尝试定位相对于正文下拉列表,而不是$(function() {
$('.owl-carousel')
.each(function() {
let carousel = $(this);
carousel.on('show.bs.dropdown', '[data-bs-toggle=dropdown]', function() {
// universal solution
let dropdown = bootstrap.Dropdown.getInstance(this);
$(dropdown._menu).insertAfter(carousel);
// alternative for this particular layout
// $(this).next('.dropdown-menu').insertAfter(carousel);
});
})
.owlCarousel({
loop:true,
margin:15,
nav:true,
});
});
<div class="py-5 mx-4">
<h2>First Owl Carousel</h2>
<div class="owl-carousel owl-theme">
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 1</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 2</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu2">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
<li><a class="dropdown-item" href="#">Link 7</a></li>
<li><a class="dropdown-item" href="#">Link 8</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 3</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu3">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
<li><a class="dropdown-item" href="#">Link 7</a></li>
<li><a class="dropdown-item" href="#">Link 8</a></li>
<li><a class="dropdown-item" href="#">Link 9</a></li>
<li><a class="dropdown-item" href="#">Link 10</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 4</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu4">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
<li><a class="dropdown-item" href="#">Link 7</a></li>
<li><a class="dropdown-item" href="#">Link 8</a></li>
<li><a class="dropdown-item" href="#">Link 9</a></li>
<li><a class="dropdown-item" href="#">Link 10</a></li>
<li><a class="dropdown-item" href="#">Link 11</a></li>
<li><a class="dropdown-item" href="#">Link 12</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
</div>
<h2>Second Owl Carousel</h2>
<div class="owl-carousel owl-theme">
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 1</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu21" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu21">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 2</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu22" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu22">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
<li><a class="dropdown-item" href="#">Link 7</a></li>
<li><a class="dropdown-item" href="#">Link 8</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 3</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu23" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu23">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
<li><a class="dropdown-item" href="#">Link 7</a></li>
<li><a class="dropdown-item" href="#">Link 8</a></li>
<li><a class="dropdown-item" href="#">Link 9</a></li>
<li><a class="dropdown-item" href="#">Link 10</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
<div class="item card">
<div class="d-flex align-items-center p-3">
<h5>Shilipp Sotocnik 4</h5>
<div class="dropdown dropdown-lg d-inline-block ms-auto">
<a href="#" role="button" id="dropdownMenu24" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu24">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
<li><a class="dropdown-item" href="#">Link 4</a></li>
<li><a class="dropdown-item" href="#">Link 5</a></li>
<li><a class="dropdown-item" href="#">Link 6</a></li>
<li><a class="dropdown-item" href="#">Link 7</a></li>
<li><a class="dropdown-item" href="#">Link 8</a></li>
<li><a class="dropdown-item" href="#">Link 9</a></li>
<li><a class="dropdown-item" href="#">Link 10</a></li>
<li><a class="dropdown-item" href="#">Link 11</a></li>
<li><a class="dropdown-item" href="#">Link 12</a></li>
</ul>
</div>
</div>
<p class="px-3">
Lorem ipsum dummy
</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt doloribus ipsa at culpa fugit nesciunt nulla rem inventore eum perspiciatis assumenda ipsam aut architecto unde laboriosam totam fuga in, dolore.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">