پرسش

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

Bootstrap Navbar with left , center or right aligned items

سلام من می‌خوام نوار navbar در بوت استرپ بسازم که آیتم‌های اون رو بتونم  چپ چین، وسط چین یا راست‌ چین کنم. با استفاده از بوت استرپ 5 چطور می‌تونم این کار رو انجام بدم؟

1403/05/30
پاسخ
سلام برای تنظیم موقعیت آیتم‌های navbar  تو بوت استرپ 5 می‌تونی از کلاس‌های بوت استرپ برای چپ‌ چین، وسط‌ چین و راست‌ چین کردن استفاده کنی. بوت استرپ به طور پیش‌فرض از Flexbox برای چیدن آیتم‌ها در نوبار استفاده می‌کنه که این کار رو بسیار راحت می‌کنه.
برای چپ‌ چین کردن  نیاز به کار خاصی نیست چون  به صورت پیش‌فرض چپ چینه و نیازی به کلاس اضافی نداره
برای وسط‌ چین کردن آیتم‌ها، می‌تونی از کلاس mx-auto استفاده کنی که باعث می‌شه فضای خالی به طور مساوی در سمت چپ و راست آیتم‌های navbar قرار بگیره.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <!-- Left Aligned Items -->
            <a class="navbar-brand" href="#">برند</a>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" href="#">خانه</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ویژگی ها</a>
                </li>
            </ul>
            <!-- Center Aligned Items -->
            <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">درباره ما</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ارتباط باما</a>
                </li>
            </ul>
            <!-- Right Aligned Items -->
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">لاگین</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ثبت نام</a>
                </li>
            </ul>
        </div>
<nav>
   تو این کد برای چپ‌ چین کردن آیتم‌ها، نیازی به کلاس اضافی نیست.
   برای وسط‌ چین کردن از کلاس mx-auto استفاده شده
   برای راست‌ چین کردن  از کلاس ms-auto استفاده شده
پاسخ: 1403/05/30
آخرین آپدیت: 1403/07/19