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

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

How to align Bootstrap navbar items to the right?

چطور می‌تونم آیتم‌های نوبار بوت‌ استرپ 5 رو  به سمت راست صفحه تراز کنم؟ من دوست دارم آیتم‌های نوبار به سمت راست برن.

1403/05/30
پاسخ
مهرشاد براتی برنامه نویس فول استک وب ،موبایل ،دستکاپ ،کارشناس ارشد مهندسی کامپیوتر نرم افزار
بیوگرافی مهرشاد براتی

برای اینکه بتونی آیتم‌ های navbar رو تو بوت‌ استرپ 5  به سمت راست تراز کنی، می‌تونی از کلاس‌های پیش‌فرض بوت‌ استرپ استفاده کنی. بهترین راه اینه که از کلاس ms-auto که به معنی "مارجین خودکار از سمت چپ" هستش، استفاده کنی. این کلاس باعث میشه که آیتم‌ های navbar به صورت خودکار به سمت راست برن

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <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 ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">خانه</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ویژگی ها</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">قیمت ها</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

اینجا، کلاس ms-auto به ul اضافه شده که باعث میشه آیتم‌ها به سمت راست نوار navbar تراز بشن

پاسخ: 1403/05/30
آخرین آپدیت: 1403/07/15