{"user": {"is_authenticated": false}}
{"talent_site_base_url": "https://talent.quera.org", "domain_base_url": "https://quera.org"}
لینکهای مفید برای شرکت در مسابقه:
+ [قالب صورت سوال و نحوه داوری Front-End](https://quera.ir/course/assignments/5546/problems)
+ [قوانین شرکت در مسابقات](https://quera.ir/course/assignments/2693/problems/33523)
+ [اطلاعات بیشتر در مورد این مسابقه](https://quera.ir/blog)
+ [آشنایی با امکان جدید Quera: تست نمونه سوالهای تکنولوژی](https://quera.ir/course/assignments/2693/problems/42815)
در زمان مسابقه می‌توانید سوالهای خود را از قسمت "سوال بپرسید" مطرح کنید.
**مهارت‌های لازم:**
+ آشنایی با `CSS`
--------------------------------------------------
در این سوال قصد داریم ستون‌های واکنش‌گرا طراحی کنیم.
با تغییر اندازه‌ی عرض این صفحه، اندازه این ستون‌ها با توجه به کلاس و اندازه صفحه تغییر می‌کند.
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/ZFganfoDwi/responsive-column.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
responsive-column
├── index.html
└── styles.css
```
# جزئیات
کلاس‌های زیر را با توجه به توضیحات گفته شده پیاده سازی نمائید.
- کلاس `row`: یک ردیف در صفحه ایجاد می‌کند.در هر ردیف حداکثر ۶ ستون و حداقل ۱ ستون قرار می‌گیرد.
- کلاس `col`: همواره ستون‌هایی با عرض یکسان ایجاد می‌کند. به عبارتی اگر در داخل یک تگ `div` با کلاس `row` چند تگ `div`با کلاس `col` وجود داشته باشد، عرض همه تگ‌های `div` با کلاس `col` یکسان است.
- کلاس `col-n`: عرض عنصر را به میزان $n$ واحد از عرض عنصر `parent` تنظیم می‌کند.
- کلاس `col-sm-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه از `576px` بزرگتر باشد روی عنصر اعمال می‌شود.
- کلاس `col-md-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه از `768px` بزرگتر باشد روی عنصر اعمال می‌شود.
- کلاس `col-lg-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه بزرگتر از `992px` باشد روی عنصر اعمال می‌شود.
# نکات
- توجه کنید که اولویت اعمال همیشه برای کلاس‌هایی است که در `media-query` بالاتر قرار دارند.
- همچنین در صورتی که عرض صفحه خارج از محدوده‌ی یک کلاس قرار بگیرد، عرض المانی که دارای آن کلاس است `100%` می‌شود. به عبارتی اگر یک المان دارای کلاس `col-lg-n`باشد در صفحه با عرض کمتر از `992px`، در صورتی که این المان دارای کلاس دیگری نباشد، عرض آن `100%` می‌شود.
- توجه کنید که داوری خودکار بر مبنای نام کلاس‌ها انجام می‌شود.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── styles.css
```
<details class="blue">
<summary>
توضیحات تست نمونه
</summary>
برای این سوال تست‌هایی با استفاده از زبان پایتون و با کمک `selenium` نوشته شده است. یک نمونه از این تست‌ها در اختیار شما قرار دارد و شما می‌توانید آن را با کمک دستور زیر اجرا کنید. تست‌های نمونه این سوال را می‌توانید از [اینجا](https://quera.ir/qbox/download/5gTsCJQ3FD/sample_test%20(1).py) دانلود کنید.
```
python3 -m unittest sample_test.py
```
</details>
ستون‌های واکنش‌گرا
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.