القاعدة العمودية

كيف تعمل

القواعد العمودية مستوحاة من <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>