پیشنهاد شگفت‌انگیز سبزلرن: 50% تخفیف برای آموزش حرفه ای NodeJS بدون پیش نیاز
مشاهده دوره
ثانیه
دقیقه
ساعت
روز
فرانت اند
چطور میتونم آیتم‌های منوی کشویی رو در نوار navbar بوت‌استرپ به سمت راست ببرم ؟
پرسش

چطور میتونم آیتم‌های منوی کشویی رو در نوار navbar بوت‌استرپ به سمت راست ببرم ؟

How to align dropdown menu items to the right in Bootstrap navbar

سلام  و میخوام آیتم‌ های منوی کشویی رو توی navbar  به سمت راست ببرم. چطور میتونم این کار رو انجام بدم؟

#bootstrap #navbar #dropdown #menu
1403/06/03
پاسخ
مهرشاد براتی برنامه نویس فول استک وب ،موبایل ،دستکاپ ،کارشناس ارشد مهندسی کامپیوتر نرم افزار
بیوگرافی مهرشاد براتی

سلام برای اینکه آیتم‌های منوی کشویی رو توی navbar به سمت راست ببری باید از کلاس dropdown-menu-end استفاده کنی. این کلاس باعث میشه منوی کشویی به سمت راست نوار navbar بره

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Navbar Dropdown Alignment</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 dropdown-menu-endبه منوی کشویی اضافه کن تا منو به سمت راست بره

پاسخ: 1403/06/03
آخرین آپدیت: 1403/08/02