Vertikālais noteikums

Izmantojiet pielāgoto vertikālo kārtulu palīgu, lai izveidotu vertikālus sadalītājus, piemēram, <hr>elementu.

Šajā lapā

Kā tas strādā

Vertikālie noteikumi ir iedvesmoti no <hr>elementa, ļaujot izveidot vertikālus sadalītājus parastos izkārtojumos. Tie ir veidoti tāpat kā <hr>elementi:

Tie ir 1pxplati
Viņiem ir min-heightno1em
To krāsa tiek iestatīta, izmantojot currentColorunopacity

Pielāgojiet tos ar papildu stiliem pēc vajadzības.

Piemērs

html

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

Vertikālie noteikumi mērogoja to augstumu elastīgajos izkārtojumos:

html

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

Ar kaudzēm

Tos var izmantot arī kaudzēm :

Pirmā prece

Otrais vienums

Trešais postenis

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>