Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Patayong panuntunan

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

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

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

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

<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
<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>