پرسش

چطور میشه در Bootstrap فاصله بالای بین ردیف‌ها رو اضافه کرد؟

How to add top space between rows in Bootstrap?

من از فریم‌ورک Bootstrap استفاده می‌کنم و قصد دارم بین ردیف‌ها (rows) در یک container فاصله ایجاد کنم. به‌طور پیش‌فرض، ردیف‌ها چسبیده به هم نمایش داده میشن چطور میتونم این فاصله رو اضافه کنم؟

1403/05/30
پاسخ

برای اضافه کردن فاصله بین ردیف‌ها در Bootstrap، بهترین و ساده‌ ترین راه استفاده از کلاس‌های فضای داخلی (padding) یا فضای بیرونی (margin) هستش. در Bootstrap 5، میتونی از کلاس‌های mt-* برای ایجاد فاصله بالا (margin-top) استفاده کنی فرض کنیم که دو ردیف در یک container داریم و میخوایم بین اونا فاصله بیندازید.باید به ردیف دوم کلاس mt-3 یا mt-4 بدیم تا فاصله‌ مناسب ایجاد بشه

 

<div class="container">
  <div class="row">
    محتوای ردیف اول
  </div>
  <div class="row mt-4">
    محتوای ردیف دوم 
  </div>
</div>

تو این مثال، کلاس mt-4 به ردیف دوم اضافه شده که باعث میشه فاصله‌ ای از بالا برای اون ردیف ایجاد بشه اگر بخوایم فاصله دقیق‌تری رو تنظیم کنیم، میتونیم از کلاس‌های دیگه مثل mt-1 تا mt-5 (برای فاصله‌های مختلف) یا mt-auto برای حداکثر فاصله ممکن استفاده کنیم

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