Patayong panuntunan

Gamitin ang custom na vertical rule helper para gumawa ng mga vertical divider tulad ng <hr>elemento.

Sa pahinang ito

Paano ito gumagana

Ang mga vertical na panuntunan ay inspirasyon ng <hr>elemento, na nagbibigay-daan sa iyong lumikha ng mga vertical divider sa mga karaniwang layout. Ang mga ito ay naka-istilo tulad <hr>ng mga elemento:

1pxMalawak sila
Mayroon silang min-heightng1em
Ang kanilang kulay ay nakatakda sa pamamagitan ng currentColoratopacity

I-customize ang mga ito gamit ang mga karagdagang istilo kung kinakailangan.

Halimbawa

html

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

Sinusukat ng mga vertical na panuntunan ang kanilang taas sa mga flex na layout:

html

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

May mga stack

Maaari din silang magamit sa mga stack :

Unang item

Pangalawang item

Pangatlong item

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>