عدم لحاظ کردن حالت 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 را قرار بدیم چون تو درس‌های جلوتر دیدم خود استاد هم همین مشکل را باهاش برخورد داشتند

علی نبی زاده ۱۷ خرداد ۱۴۰۲، ۱۵:۴۸

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

علی نبی زاده ۱۷ خرداد ۱۴۰۲، ۱۵:۴۹

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

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

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

بهترین پاسخ

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