پرسش

مشکل راست چین شدن منوی کشویی در بوت‌ استرپ ۵

Bootstrap 5 dropdown menu go out off to the right of the screen

سلام من از بوت‌ استرپ ۵ استفاده میکنم و با منوی کشویی دچار مشکلی شدم. وقتی منوی کشویی باز میشه، به سمت راست صفحه میره و بخشی از اون خارج از صفحه نمایش قرار میگیره چطور میتونم این مشکل رو حل کنم؟

#dropdown #menu #bootstrap

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

پیشنهاد شگفت‌انگیز سبزلرن: 50% تخفیف برای آموزش حرفه ای NodeJS بدون پیش نیاز

مشکل راست چین شدن منوی کشویی در بوت‌ استرپ ۵