مشکل در اجرای کد

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

سلام وقتتون بخیر

من به تگ div کلاس col-xs-6 دادم ولی وقتی سایز مرورگر من کمتر از 600 هست اجرا نمیشه و6 ستون رو در مرورگر پر نمیکنه و لینک کدپن رو براتون گذاشتم

https://codepen.io/mahshid73/pen/qBLxvOX

سلام! مشکلی که شما توصیف کرده‌اید مربوط به استفاده از کلاسهای قدیمی بوتستراپ (Bootstrap 3) می‌باشد. در نسخه‌های جدیدتر بوتستراپ (بوتستراپ 4 و بالاتر)، سیستم گرید تغییر کرده و از کلاس‌های متفاوتی برای تعریف ستون‌ها استفاده می‌شود.

برای رفع این مشکل، شما باید کلاس‌های بوتستراپ 3 را به کلاس‌های معادل بوتستراپ 4 تغییر دهید. به عنوان مثال، بجای `col-xs-6` باید از `col-6` استفاده کنید.

در کدپنی که به اشتراک گذاشته‌اید، می‌توانید این تغییرات را اعمال کنید. این تغییرات باید به این صورت باشند:

```html
<div class="col-6">نمونه متن 1</div>
<div class="col-6">نمونه متن 2</div>
```

با این تغییرات، دو ستون به درستی در هر سایزی از مرورگر نمایش داده خواهند شد.

M.shehneh Sh ۰۷ مهر ۱۴۰۲، ۱۴:۵۳

سلام رفیق توی خط 47 CSS باید بین and و پرانتز یه فاصله بزاری!😅

Alireza ۰۷ مهر ۱۴۰۲، ۱۴:۵۵

این کدی که من نوشتم یه مینی فریم ورک هست که جدا از بوسترپ هست

Sheyda ۰۸ مهر ۱۴۰۲، ۰۶:۵۱

این کدی که من نوشتم یه مینی فریم ورک هست که جدا از بوسترپ هست

Sheyda ۰۸ مهر ۱۴۰۲، ۰۶:۵۱

اقای علیرضا ممنون بابت پاسخ خوبتون من تغییراتی که گفتید رو اعمال کردم و درحالت xs و s درست شد ولی در حالت md و l و xl همچنان اعمال نمیشه

Sheyda ۰۸ مهر ۱۴۰۲، ۰۶:۵۳

درود

در گام اول همونطور که دوست خوبمون علیرضا اشاره کرد باید بین همه مدیا کوئریهایی که and و پرانتز هست، یک فاصله بذارید. یعنی خط 47و 124و201 و...

در گام بعد باید دقت کنید که در بخش html از مدیا کوئری استفاده کنید. یعنی برای اعمال md باید اون رو به صورت زیر در تگ اضافه کنید:

نازنین کریمی مقدم ۰۸ مهر ۱۴۰۲، ۱۳:۰۱

بهترین پاسخ

نازنین کریمی مقدم ۰۸ مهر ۱۴۰۲، ۱۳:۰۱