راکت

راست چین کردن گزینه های زیرمنوی dropdown در navbar در بوت استرپ4

13 پاسخ

باسلام، دوستان من یه منوی navbar(منوی اصلی صفحه) توی بوت استرپ4 طراحی کردم که یه زیر منوی dropdown هم توش هست. از افزونه ی راست چین لینک زیر هم استفاده کردم ولی گزینه های dropdown راست چین نشد!

عنوان لینک مورد نظر

دوستان اگر راهکاری دارین ممنون میشم محبت کنین

ثبت پرسش جدید

پاسخ‌ها

13
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

برای بوت استرپ راستچین، این مورد رو پیشنهاد می کنم:
http://abs.aryavandidad.com/fa-ir/sample

رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

درود...
کد زیر:

.dropdown-menu{
    right: 0;
}

شاید پاسخ شما همین‌جا باشد

جواد پاکدل
جواد پاکدل
@JavadPakdel

تخصص: Front-End

@milad ممنونم، توی این نسخه فایل jquery.js وجود نداره و من توی پروژه ام از یه پلاگین jquery مرتبط با بوت استرپ استفاده کردم که روی این نسخه بوت استرپ فعال نشد، شایدم من درست فایل ها رو جایگذاری نکردم
حالا چندتا سوال برام پیش اومده:
آیا این نسخه از بوت استرپ از jquery پشتیبانی میکنه؟؟!!
bootstrap.min.js
bootstrap.bundle.min.js
popper.min.js
این 3تا فایل مینی بالا که اسمشون رو نوشتم توی قسمت js این نسخه ی راستچین که گفتین وجود دارن.
کدوم فایلهای js. رو با چه ترتیبی توی سندم باید استفاده کنم؟ توی body بذارم یا توی head؟
کاربرد فایل bundle چیه؟
قبلش من از فایلهای jquery-3.4.1.min.js بعدش popper.min.js و بعدش bootstrap.min.js توی قسمت انتهای body استفاده میکردم و پلاگین jquery که داشتم رو هم به آخر اینا اضافه کرده بودم و توی خروجی کار میکرد.

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

فایل جی کوئری رو بصورت مجزا قرارش میدین.
این صفحه رو نگاه کنید، طبق توضیحات و مثالی که زده پیش برید.
http://abs.aryavandidad.com/fa-ir/GetStarted

جواد پاکدل
جواد پاکدل
@JavadPakdel

تخصص: Front-End

@endworld سپاس از توجهتون
کدی رو که گفتین توی استایلش وارد کردم و جواب نداد
کدهای html برنامه:

     <nav class="container navbar navbar-dark navbar-expand-lg fixed-top">
        <a href="#" class="navbar-brand">تست</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#demo">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="demo" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#Home" class="nav-link">تست</a>
                </li>
                <li class="nav-item">
                    <a href="#About" class="nav-link">تست</a>
                </li>
                <!----------------Dropdown-----------------> 
               <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">تست</a>
                    <div class="dropdown-menu bg-light">
                        <a href="#Design" class="dropdown-item">تست</a>
                        <a href="#Programming" class="dropdown-item">تست</a>
                        <a href="#Support" class="dropdown-item">تست</a>
                    </div>
                </li>
                <!------------------------------------------>
                <li class="nav-item">
                    <a href="#Weblog" class="nav-link">تست</a>
                </li>
                <li class="nav-item">
                    <a href="#Contact" class="nav-link">تست</a>
                </li>
            </ul>
        </div>

    </nav>
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

راستچین آقای موسوی رو پیشنهاد نمی کنم، قبلا باهاش کار کردم، اشکالاتی داره که نیاز به اصلاح داره. / اما اصلاحی صورت نگرفته.

جواد پاکدل
جواد پاکدل
@JavadPakdel

تخصص: Front-End

@milad ممنون حل شد، لطف کردی. به چالش های جدید دیگه ای برخوردم. اولین پروژه ام هست.

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

زنده باشی و موفق باشین 🌺

رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

@WebDesigner
کش مروگر رو پاک کن ...

MrRobot
MrRobot
@MrRo6ot

تخصص: FrontEnd Developer

بوت استرپ 5 دانلود کنید داخل پکیجش فایل راست چین شده قرار دادن :
bootstrap.rtl.min.css
--- من که به شخصه پشیمونم از تایمی که واسه بوت استرپ هدر دادم..
بهترین گزینه واسه طراحی سایت به نظرم TailwindCss و اگه با فریم ورک ویو کار میکنین Vuetify 👌👌

جواد پاکدل
جواد پاکدل
@JavadPakdel

تخصص: Front-End

@MrRo6ot ممنونم؛ این 2موردی که فرمودین(TailwindCss و Vuetify) راستچین رو ساپورت میکنن؟ و سوال دیگه اینکه توی طراحی ریسپانسیو کارایی شون در حد بوت استرپ هست؟

MrRobot
MrRobot
@MrRo6ot

تخصص: FrontEnd Developer

@WebDesigner
100 برابر بوت استرپ کارایی دارن ؛ و بوت استرپ جلوی اینا هیچ حساب میشه ، و پشیزی ارزش نداره...
TailwindCss که بخاطر داشتن فایل کانفیگ قابلیت اینو داره هر چیزیو دوس داشتین بدون دردسر تغییر بدین و حتی کامپوننت های شخصی خودتونو درست کنید...تقریبا 180 هزار خط کد برای کلاس هاش نوشتن و فوق العاده قدرتمنده و بلافاصله داخل تگ میتونید بگید hover:bg-blue ولی بوت استرپ باید برید داخل استایل اینو بنویسید و کلی مشکلات دیگه برای اعمال نشدن تغییرات با بوت هست که حتی با important حل نمیشن😂
ویوتی فای هم که از اسمش تقریبا مشخصه برای راحتی و ننوشتن کامپوننت در فریم ورک ویو اومده کلاس هاش تقریبا مثل بوت استرپه ولی 2 برابر بوت استرپ کامپوننت داره با قابلیت های فوق العاده پیشرفته👌👌

MrRobot
MrRobot
@MrRo6ot

تخصص: FrontEnd Developer

در رابطه با راست چین بودن هم باید بگم Tailwindcss چون کامپوننت نداره و صرفا برای کد زنی راحت تر css اومده طبیعتا راست چین بودنشو شما انجام میدین (یه جورایی میشه گفت این کتابخونه بدرد افرادی میخوره که سایتو میخوان به صورت خام خودشون بنویسن یا سایته سفارشی بزنن) ، ولی ویوتی فای هم تا الان به مشکلی برای بحث راست چین بودن بر نخوردم و کامپوننت هاش به درستی کار کردن...

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

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