قاعده عمودی

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

قوانین عمودی از <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>