حل

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

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

 <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

ثبت پرسش جدید

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

تخصص :-Dp-

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

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

.navbar{
    position: relative;
}

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

ارسال پاسخ

محمد

تخصص :Laravel

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

سلام کد رو داخل 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

ارسال پاسخ

علی سعادت

تخصص :junior front-end developer

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

@mrnfsh
ممنون بابت کمکتون ولی این کار جواب نمیده چون همینجوری navbar rtl هست من فقط میخوام navbar-brand رو به سمت چپ منتقل کنم و لینک ها رو سمت راست

ارسال پاسخ

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

تخصص :-Dp-

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

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

.navbar{
    position: relative;
}

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

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام