رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

قاعده عمودی

<hr>برای ایجاد تقسیم‌کننده‌های عمودی مانند عنصر از کمک‌کننده قوانین عمودی سفارشی استفاده کنید .

چگونه کار می کند

قوانین عمودی از <hr>عنصر الهام گرفته شده است و به شما امکان می دهد تقسیم کننده های عمودی را در چیدمان های رایج ایجاد کنید. آنها دقیقاً مانند <hr>عناصر طراحی شده اند:

  • آنها 1pxگسترده هستند
  • آنها min-heightدارند1em
  • رنگ آنها از طریق currentColorو تنظیم می شودopacity

در صورت نیاز آنها را با سبک های اضافی سفارشی کنید.

مثال

<div class="vr"></div>

قوانین عمودی ارتفاع خود را در طرح‌بندی‌های انعطاف‌پذیر مقیاس می‌دهند:

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

با پشته ها

آنها همچنین می توانند در پشته ها استفاده شوند :

مورد اول
مورد دوم
مورد سوم
<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>