پرسش

چطور میتونم آیتم‌های منوی کشویی رو در نوار 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

پیشنهاد شگفت‌انگیز سبزلرن: 50% تخفیف برای دوره آموزش پایتون مقدماتی تا پیشرفته + پروژه های جذاب

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