حل شده

برعکس کردن نوبار

توی بوت استرپ وقتی نوبار درست میکنیم نوبار برند سمت راست قرار میگیره... حالا من میخوام نوبار رو برعکس کنم... از چی میتونم کمک بگیرم؟ میشه راهنمایی کنید؟
کد هام:

 <nav class="navbar navbar-expand-lg ">

        <a class="navbar-brand" href="#">
            <img src="./Photo/logo.png" class="max-w">
        </a>

        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">

            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

                <li class="nav-item active">
                    <a class="nav-link font deco color align" href="#">صفحه اصلی</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link font deco color align" href="#">استریمر ها</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link font deco color align" href="#">آموزش ها</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link font deco color align" href="#">حساب کاربری</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link font deco color align" href="#">قوانین و مقررات</a>
                </li>

            </ul>

        </div>
    </nav>

html_css

علی سعادت

5 سال پیش@Saadat

ثبت پرسش جدید

پاسخ‌ها

دانیال ملک زاده

@Daniel5 سال پیش مطرح شد

تخصص: -Dp-

بهترین پاسخ

سلام ،
می تونید از روش زیر استفاده کنید :

.navbar{
    position: relative;
}

.navbar-brand{
    position: absolute;
    left : 0;
}

ارسال پاسخ

محمد

@mprogrammer75 سال پیش مطرح شد

تخصص: Laravel

سلام کد رو داخل div با class های row و justify-content-end قرار بده ولی چرا از بوت استرپ rtl استفاده نمیکنی اینطوری راحت تری

 <div class="row justify-content-end">
        <nav class="navbar navbar-expand-lg ">

            <a class="navbar-brand" href="#">
                <img src="./Photo/logo.png" class="max-w">
            </a>

            <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavId">

                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

                    <li class="nav-item active">
                        <a class="nav-link font deco color align" href="#">صفحه اصلی</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link font deco color align" href="#">استریمر ها</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link font deco color align" href="#">آموزش ها</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link font deco color align" href="#">حساب کاربری</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link font deco color align" href="#">قوانین و مقررات</a>
                    </li>

                </ul>

            </div>
        </nav>
    </div>

@ali.saadat.1386.aa

ارسال پاسخ