دوره زبان تخصصی برای برنامه‌نویسان (هدیه ویژه ثبت‌نام در دوره‌های متخصص) (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۶ Golgoli
چرا وقتی col-l-offset-0 را میزارم در عوض کلاس col-md-offset-3 از کار می‌افتد ؟
جامعه Html & CSS ایجاد شده در ۱۴ مهر ۱۴۰۲

https://7learn.com/panel/course/13/screen?chapter=1158&item=1165

سلام و وقت بخیر . سوالم مربوط به جلسه بالاست . راستش من نمیدونم چرا با اینکه چندباره دارم این ویدئو را میبینم و موبه مو استاد کد میزنم  این مشکل برام ایجاد میشه . دقیقا 25:49 فیلم منظورم هست .ببینید استاد گفتند که ما باید کلاسِ col-md-offset-3 را بدیم تا 

col-md-6  سمت راست نباشه بلکه بیاد وسط در وسط قرار بگیرد. من هم همین کار را کردم و مشکلی نبودش. اما مشکل جایی شروع شد که کلاس col-l-offset-0 را دادم، استاد گفتند این کلاس را بدیم تا col-l-12 در وضعیت large تمام صفحه را بگیره . الان برای من در حالت large یعنی عرض 992 px تمام صفحه من را پر می‌کند. ولی وقتی عرض 768 px قرار میگیره دیگه آن کلاس 6 تایی من(col-md-6) وسط قرار نمیگیره میره سمت راست ، ولی برای استاد این بخش 6 تایی وسط قرار میگیره . حالا باید چی کار کنم ؟ امیدوارم سوالم را واضح گفته باشم . 

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

https://s6.uupload.ir/filelink/7CI69CFXgGCg_ea2bbcaa0f/q1_part06_xptt.zip

ممنون میشم راهنمایی کنید. مرسی

سلام، 

آکولاد لاین 311 رو حذف کنید و یک آکولاد بسته دیگر به لاین 341 اضافه کنید تا offset‌ها داخل media query قرار بگیرند:

@media only screen and (min-width: 992px) {
  .col-l-1 {
    width: 8.33%;
  }
  .col-l-2 {
    width: 16.66%;
  }
  .col-l-3 {
    width: 25%;
  }
  .col-l-4 {
    width: 33.33%;
  }
  .col-l-5 {
    width: 41.66%;
  }
  .col-l-6 {
    width: 50%;
  }
  .col-l-7 {
    width: 58.33%;
  }
  .col-l-8 {
    width: 66.66%;
  }
  .col-l-9 {
    width: 75%;
  }
  .col-l-10 {
    width: 83.33%;
  }
  .col-l-11 {
    width: 91.66%;
  }
  .col-l-12 {
    width: 100%;
  }
  .col-l-offset-0{
    margin-right: 0;
  }
  .col-l-offset-1{
    margin-right: 8.33%;
  }
  .col-l-offset-2{
    margin-right: 16.66%;
  }
  .col-l-offset-3{
    margin-right: 25%;
  }
  .col-l-offset-4{
    margin-right: 33.33%;
  }
  .col-l-offset-5{
    margin-right: 41.66%;
  }
  .col-l-offset-6{
    margin-right: 50%;
  }
  .col-l-offset-7{
    margin-right: 58.33%;
  }
  .col-l-offset-8{
    margin-right: 66.66%;
  }
  .col-l-offset-9{
    margin-right: 75%;
  }
  .col-l-offset-10{
    margin-right: 83.33%;
  }
  .col-l-offset-11{
    margin-right: 91.66%;
  }
  .col-l-offset-12{
    margin-right: 100%;
  }
}
محسن موحد ۱۶ مهر ۱۴۰۲، ۰۶:۵۹

https://s6.uupload.ir/filelink/R2yoGeEAYpHZ_8229d7a400/q2_part06_mpok.zip   

سلام مجدد من کد شما را وارد پروژم کردم درست نشد. بعد برای کلاس‌های xs و s و xl هم همین کار را کردم offset‌ها را درون تگ مدیا قرار دادم . باز همینجوریه . بعد نمیدونم چرا فایل index من روی کامپیوتر خودم باز میشه ، ولی الان که  زیپش کردم تمام استایل‌های css از بین رفته . ولی کد‌های css ام را یک نگاه بکنید درست قرارشون دادم.

Golgoli ۱۶ مهر ۱۴۰۲، ۰۷:۵۴

بررسی کردم، درست هستن. خروجی فایل شما

Screenshot-2023-10-08-115722-CXqT.png
محسن موحد ۱۶ مهر ۱۴۰۲، ۰۸:۲۸

مرسی ،ممنون چک کردین من خودم هم بعد شما با w3schools زدم کاملا درست بودش فقط نمیدونم چرا توی کامپیوتر من اذیت میکنه با اینکه هی ctrl+f5 را میزنم اما همونجوری نشان میده !!!Part06-2-O1yz.png

 

بعد اینکه یک سوال دیگه چرا توی عرض 735 پیکسل تمام عرض‌ها خیلی کوچک نشان میده ؟Part06-3-oiJN.png

Golgoli ۱۶ مهر ۱۴۰۲، ۱۰:۵۶

درود

بله این مقادیر بسته به سایز مانیتور کوچک و بزرگ میشه و برای همین در اون سایز جمع میشه، یا در سیستم شما اونجوری نشون داده میشه.

جلوتر نحوه ادیت در سایزهای مختلف مانیتور رو یاد میگیرید نگران نباشید.

نازنین کریمی مقدم ۱۷ مهر ۱۴۰۲، ۰۶:۵۷