پرسش

تفاوت بین کلاس‌های container و container-fluid در بوت‌ استرپ چیه؟

What is the difference between Bootstrap container and container-fluid classes?

سلام دارم با بوت‌استرپ ۵ کار می‌کنم و یکم گیج شدم. می‌خواستم بدونم فرق اصلی بین کلاس‌های container و container-fluid توی بوت‌  چیه؟ هر کدوم رو کجا باید استفاده کنیم؟

1403/05/30
پاسخ

سلام تفاوت اصلی بین کلاس‌های container و container-fluid توی بوت‌ استرپ توی مدل مدیریت عرض عناصره.

کلاس containerیک کانتینر با عرض ثابت ایجاد می‌کنه که بسته به اندازه صفحه نمایش، عرضش تغییر می‌کنه.مثلا توی صفحه نمایش بزرگ (lg) این کانتینر عرضش 1140 پیکسل میشه توی صفحه نمایش متوسط (md) عرضش 960 پیکسل.

این نوع کانتینر برای وقتیه که می‌خوایم محتوا دقیقا  وسط صفحه قرار بگیره و همیشه یکم فضای خالی در دو طرف کانتینر بمونه.

 container-fluidاین کلاس یک کانتینر با عرض 100 درصد ایجاد می‌کنه که کل عرض صفحه رو پوشش میده، بدون توجه به اندازه صفحه نمایش. این گزینه برای وقتیه که می‌خوایم محتوا از اول تا اخر صفحه کشیده بشه و هیچ فضای خالی در دو طرف باقی نمونه.

 

<div class="container">
  <p>This is a fixed-width container.</p>
</div>
<div class="container-fluid">
  <p>This is a full-width container.</p>
</div>

اگر میخوای محتوات توی مرکز صفحه و با یک عرض مشخص قرار بگیره، از container استفاده کن. ولی اگر میخوای محتوات کل عرض صفحه رو بپوشونه، container-fluid انتخاب بهتریه. بسته به نیازی که داری، یکی از این دو رو می‌تونی انتخاب کنی.

پاسخ: 1403/05/30
آخرین آپدیت: 1403/07/15