علی سعادت
4 سال پیش توسط علی سعادت مطرح شد
3 پاسخ

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

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

 <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>

ثبت پرسش جدید
دانیال ملک زاده
تخصص : -Dp-
@Daniel 4 سال پیش مطرح شد
1

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

.navbar{
    position: relative;
}

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

محمد
تخصص : Laravel
@mprogrammer7 4 سال پیش مطرح شد
0

سلام کد رو داخل 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
@Saadat 4 سال پیش مطرح شد
0

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


دانیال ملک زاده
تخصص : -Dp-
@Daniel 4 سال پیش مطرح شد
1

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

.navbar{
    position: relative;
}

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

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

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