Container Fluid و Container چه کاری در Bootstrap انجام می دهند؟ چند وقت پیش بدنبال انجام پروژه ای بودم و با مفهوم هایی سر و کله زدم که موقع یادگرفتن سریع از روشون رد شدم ولی تو محیط کار دقیقا 3 روز وقتم رو گرفت و از کارم عقبم انداخت . پروژه من از یه sidebar و یه content تشکیل شده بود و من sidebar رو بدون مشکل پیاده سازی و مشکلاتش رو برطرف کردم و مشکل از اونجا شروع شد که خواستم بیام سر وقت قسمت متن صفحم یا همون content ام ...و با این صحنه ی دلخراش و جان سوز مواجه شدم :
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
بله ، متنم به صورت خیلی زیبا تو دیوار بود . هر حیله و ترفندی به ذهنم میرسید به کار گرفتم برای درست کردن این مشکل و حتی از بعضی از دوستانم که جویا شدم به من استفاده از کدهای مخصوص جاوا اسکریپت رو پیشنهاد کردن که بگم اگه پنجره //resize// شد به //width// صفحم بگه که دوست عزیز تو این مقدار باید کم بشی و این تصویر اشتباه خودم رو هم بگم که من فکر میکردم این داستان با //media query// های //css// حل می شود ولی خب کاملا در اشتباه بودم . خلاصه اینکه نه من جاوا اسکریپت بلد بودم نه کسی بهم کمک میکرد که کدش رو بزنم و اجرا کنم و راهی که برای برطرف کردن موضعی این مشکل به ذهنم رسید این بود که فعلا
overflow-x : hidden ;
رو اعمال کنم تا به طراحیم برسم ولی خب مثل این بود که یه زخم رو فعلا ببندید و بعدا ممکنه براتون مشکل ساز بشه که برای منم شد تا با گشتن توی فوروم های خارجی و چند جای دیگه بهش رسیدم .اولش تصویر خودم از 2 تا مفهوم container و container fluid رو بازسازی ... نه بهتره بگم ساختم چون تصویری نبود.container : یه کلاسی هستش که یه محتوا رو با عرض ثابت براتون فراهم میکنه //fixed width//
- container fluid : یه کلاسی هستش که یک محتوا رو با عرض کامل براتون فراهم میکنه //full width//
برای مثال فرض کنید من 2 تا متن رو براتون تو همین صفحه با هر دو تست میکنم که به صورت زیر می شوند :
container fluid :
container :
کاملا معلوم هستش که توی container fluid خود web browser میاد و حداکثر عرضی که تو هر اندازه از صفحه میتونه داشته باشه رو به شما اختصاص میده ولی توی container که دیدیم web browser براش تعریف شده که یک مقدار fixed (طبق تعریف بالا) رو به محتوای ما اختصاص میده و این باعث می شه که متن ما بره تو در و دیوار ...البته کار دیگه ای که میشه کرد این هستش که بیایم با همون روش container بریم جلو ، ولی بیایم بهش استایل بدیم و توی استایل این تغییرات رو اعمال کنیم که دقیقا مصداق بارز چرخوندن لقمه هستش ، امیدوارم که این مطلب بتونه حتی به یک نفر کمک بکنه که در صورت بروز همچین مشکلی فورا مشکلش حل بشه و از وقت ارزشمندش به نحو احسنت استفاده بکنه