عدم لحاظ کردن حالت Col-s-12

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام من col-xs و col-md را ایجاد کردم و col-s را برای خلاصه ننوشتم اما اونجوری که استاد شما گفتید col-s را مثل col-xs در نظر نگرفت و مثل حالتی که اصلا استایل نمیدهیم آن را در نظر گرفت ...!!

درود

کدتون رو در codepen.io آپلود کنید تا بتونیم بررسی کنیم.

جواد رحمانیان ۱۷ خرداد ۱۴۰۲، ۱۵:۳۰

html>
<html lang="en" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Documenttitle>
<style>
@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@media only screen and (max-width:600px){
    .col-xs-1{
        width: 8.33%;
    }
    .col-xs-2{
        width: 16.66%;
    }
    .col-xs-3{
        width: 25%;
    }
    .col-xs-4{
        width: 33.33%;
    }
    .col-xs-5{
        width: 41.66%;
    }
    .col-xs-6{
        width: 50%;
    }
    .col-xs-7{
        width: 58.33%;
    }
    .col-xs-8{
        width: 66.66%;
    }
    .col-xs-9{
        width: 75%;
    }
    .col-xs-10{
        width: 83.33%;
    }
    .col-xs-11{
        width: 91.66%;
    }
    .col-xs-12{
        width: 100%;
    }
    .col-xs-offset-0{
        margin-right: 0;
    }
    .col-xs-offset-1{
        margin-right: 8.33%;
    }
    .col-xs-offset-2{
        margin-right: 16.66%;
    }
    .col-xs-offset-3{
        margin-right: 25%;
    }
    .col-xs-offset-4{
        margin-right: 33.33%;
    }
    .col-xs-offset-5{
        margin-right: 41.66%;
    }
    .col-xs-offset-6{
        margin-right: 50%;
    }
    .col-xs-offset-7{
        margin-right: 58.33%;
    }
    .col-xs-offset-8{
        margin-right: 66.66%;
    }
    .col-xs-offset-9{
        margin-right: 75%;
    }
    .col-xs-offset-10{
        margin-right: 83.33%;
    }
    .col-xs-offset-11{
        margin-right: 91.66%;
    }
    .col-xs-offset-12{
        margin-right: 100%;
    }
    
    
    
}
@media only screen and (min-width:600px){
    .col-s-1{
        width: 8.33%;
    }
    .col-s-2{
        width: 16.66%;
    }
    .col-s-3{
        width: 25%;
    }
    .col-s-4{
        width: 33.33%;
    }
    .col-s-5{
        width: 41.66%;
    }
    .col-s-6{
        width: 50%;
    }
    .col-s-7{
        width: 58.33%;
    }
    .col-s-8{
        width: 66.66%;
    }
    .col-s-9{
        width: 75%;
    }
    .col-s-10{
        width: 83.33%;
    }
    .col-s-11{
        width: 91.66%;
    }
    .col-s-12{
        width: 100%;
    }
    .col-s-offset-0{
        margin-right: 0;
    }
    .col-s-offset-1{
        margin-right: 8.33%;
    }
    .col-s-offset-2{
        margin-right: 16.66%;
    }
    .col-s-offset-3{
        margin-right: 25%;
    }
    .col-s-offset-4{
        margin-right: 33.33%;
    }
    .col-s-offset-5{
        margin-right: 41.66%;
    }
    .col-s-offset-6{
        margin-right: 50%;
    }
    .col-s-offset-7{
        margin-right: 58.33%;
    }
    .col-s-offset-8{
        margin-right: 66.66%;
    }
    .col-s-offset-9{
        margin-right: 75%;
    }
    .col-s-offset-10{
        margin-right: 83.33%;
    }
    .col-s-offset-11{
        margin-right: 91.66%;
    }
    .col-s-offset-12{
        margin-right: 100%;
    }
}
@media only screen and (min-width:768px){
    .col-md-1{
        width: 8.33%;
    }
    .col-md-2{
        width: 16.66%;
    }
    .col-md-3{
        width: 25%;
    }
    .col-md-4{
        width: 33.33%;
    }
    .col-md-5{
        width: 41.66%;
    }
    .col-md-6{
        width: 50%;
    }
    .col-md-7{
        width: 58.33%;
    }
    .col-md-8{
        width: 66.66%;
    }
    .col-md-9{
        width: 75%;
    }
    .col-md-10{
        width: 83.33%;
    }
    .col-md-11{
        width: 91.66%;
    }
    .col-md-12{
        width: 100%;
    }
    .col-md-offset-0{
        margin-right: 0;
    }
    .col-md-offset-1{
        margin-right: 8.33%;
    }
    .col-md-offset-2{
        margin-right: 16.66%;
    }
    .col-md-offset-3{
        margin-right: 25%;
    }
    .col-md-offset-4{
        margin-right: 33.33%;
    }
    .col-md-offset-5{
        margin-right: 41.66%;
    }
    .col-md-offset-6{
        margin-right: 50%;
    }
    .col-md-offset-7{
        margin-right: 58.33%;
    }
    .col-md-offset-8{
        margin-right: 66.66%;
    }
    .col-md-offset-9{
        margin-right: 75%;
    }
    .col-md-offset-10{
        margin-right: 83.33%;
    }
    .col-md-offset-11{
        margin-right: 91.66%;
    }
    .col-md-offset-12{
        margin-right: 100%;
    }
}
@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%;
    }
}
@media only screen and (min-width:1200px){
    .col-xl-1{
        width: 8.33%;
    }
    .col-xl-2{
        width: 16.66%;
    }
    .col-xl-3{
        width: 25%;
    }
    .col-xl-4{
        width: 33.33%;
    }
    .col-xl-5{
        width: 41.66%;
    }
    .col-xl-6{
        width: 50%;
    }
    .col-xl-7{
        width: 58.33%;
    }
    .col-xl-8{
        width: 66.66%;
    }
    .col-xl-9{
        width: 75%;
    }
    .col-xl-10{
        width: 83.33%;
    }
    .col-xl-11{
        width: 91.66%;
    }
    .col-xl-12{
        width: 100%;
    }
}
[class |="col"]{
    float: right;
    padding:0 4px;
}
.gray-bg{
background-color: #5e5e5e;
height: 300px;
}
.red-bg{
    background-color: #ff0000;
    }
    .blue-bg{
        background-color: #0209cb;
        }
.container{
max-width: 1200px;
margin: 50px auto;
        }
.mb{
    margin-bottom: 5px;
    height:;
}
.row::after{
    content: ;
    display: table;
    clear: both;
}
.d-2{
    margin-top: 100px;
    width: 100%;
    height: 120px;
    border: 1px solid black;
}
.master{
    height: 1500px;
}
style>
  head>
  <body>
    <div class="container row">
        <div class="col-xs-12 col-md-4 mb"><div class="gray-bg">1div>div>
        <div class="col-xs-12 col-md-4 mb"><div class="gray-bg">2div>div>
        <div class="col-xs-12 col-md-4 mb"><div class="gray-bg">3div>div>
        <div class="col-xs-12 col-md-2 mb"><div class="gray-bg">1div>div>
        <div class="col-xs-12 col-md-2 mb"><div class="gray-bg">2div>div>
        <div class="col-xs-12 col-md-2 mb"><div class="gray-bg">3div>div>
        <div class="col-xs-12 col-md-2 mb"><div class="gray-bg">3div>div>
        <div class="col-xs-12 col-md-2 mb"><div class="gray-bg">3div>div>
        <div class="col-xs-12 col-md-2 mb"><div class="gray-bg">3div>div>
        <div class="col-xs-12 col-md-6 mb"><div class="gray-bg">3div>div>
        <div class="col-xs-12 col-md-6 mb"><div class="gray-bg">3div>div>
    div>
    <div class="container row">
        <div class="col-xs-12 col-s-12 col-md-4 col-md-offset- col-l-12 col-l-offset-0  mb"><div class="gray-bg">3div>div>
          div>
  body>
html>

استاد کیقباد اللهیاری ۱۷ خرداد ۱۴۰۲، ۱۵:۴۱

نشد

در https://codepen.io/ آپلود کنید. اینجا فرمت رو بهم میریزه و قابل بررسی نیست.

جواد رحمانیان ۱۷ خرداد ۱۴۰۲، ۱۵:۴۳

تا حالا امتحان نکردم نمیدونم چجوریه ... بی خیال مجبوریم col-s-1 را قرار بدیم چون تو درس‌های جلوتر دیدم خود استاد هم همین مشکل را باهاش برخورد داشتند

استاد کیقباد اللهیاری ۱۷ خرداد ۱۴۰۲، ۱۵:۴۸

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

استاد کیقباد اللهیاری ۱۷ خرداد ۱۴۰۲، ۱۵:۴۹

سؤالات دانشجویان رو منتورها پاسخ میدن.

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

بنابراین در سؤالاتتون درج نکنید که استاد پاسخ بدن چون مشخص نیست استاد چه زمانی اون سؤال رو ببینه.

بهترین پاسخ

استاد ماندیس بحرینی ۱۹ خرداد ۱۴۰۲، ۰۸:۲۹