تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
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>