پرسش

معنی کلاس me-auto در بوت‌ استرپ چیه؟

What is the meaning of Bootstrap 5 class me-auto?

سلام معنی کلاس me-auto در بوت‌ استرپ چیه؟ توی چه مواردی ازش استفاده میشه و چطوری میتونیم ازش استفاده کنیم؟

 

1403/06/05
پاسخ

سلام me-auto یه کلاس خیلی مفید برای تنظیم margins هست این کلاس به معنی "margin-end-auto" میشه و معمولا برای تنظیم حاشیه سمت راست (راست به چپ) یا سمت چپ (چپ به راست) استفاده میشه.

وقتی این کلاس رو به یه عنصر اضافه میکنی، این عنصر به طور خودکار تمام فضای خالی موجود رو از سمت خاص خودش پر میکنه با اضافه کردن me-auto به یه عنصر، اون عنصر به سمت دیگه حرکت میکنه تا تمام فضای موجود رو پر کنه

این کلاس معمولا برای alignment استفاده میشه. مثلا اگر بخوای یه عنصر رو در یک ردیف از سمت چپ به راست بچینی و فضای اضافی رو در سمت راست بذاری، میتونی از این کلاس استفاده کنی.

<div class="container">
  <div class="row">
    <div class="col">
      <button class="btn btn-primary me-auto">Left-aligned Button</button>
    </div>
    <div class="col">
      <button class="btn btn-secondary">Right-aligned Button</button>
    </div>
  </div>
</div>

اینجا دکمه با کلاس me-auto به سمت چپ ردیف میره و فضای اضافی رو سمت راست خودش باقی میذاره. این باعث میشه که دکمه دوم سمت راست ردیف قرار بگیره

پاسخ: 1403/06/05
آخرین آپدیت: 1403/08/09