پرسش
مشکل راست چین شدن منوی کشویی در بوت استرپ ۵
Bootstrap 5 dropdown menu go out off to the right of the screen
سلام من از بوت استرپ ۵ استفاده میکنم و با منوی کشویی دچار مشکلی شدم. وقتی منوی کشویی باز میشه، به سمت راست صفحه میره و بخشی از اون خارج از صفحه نمایش قرار میگیره چطور میتونم این مشکل رو حل کنم؟
1403/06/05
پاسخ
مهرشاد براتی
سلام برای حل مشکل میتونی از کلاس dropdown-menu-end استفاده کنی تا منوی کشویی به سمت راست تراز بشه و از صفحه خارج نشه. همچنین، اگه نیاز داری که منوی کشویی همیشه توی صفحه بمونه و از راست صفحه بیرون نزنه، میتونی از کلاس‌های overflow-hidden و position-relative استفاده کنی.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu Issue</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Ensures the container has no overflow */
.dropdown-container {
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container dropdown-container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
</body>
</html>کلاس dropdown-menu-end باعث میشه منوی کشویی به سمت راست تراز بشه.
کلاس dropdown-container با overflow-hidden و position-relative باعث میشه که منوی کشویی از صفحه بیرون نره
پاسخ: 1403/06/05
آخرین آپدیت: 1403/08/12