قاعده عمودی

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

در این صفحه

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

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

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

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

مثال

html

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

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

html

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

با پشته ها

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

مورد اول

مورد دوم

مورد سوم

html

<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>