વર્ટિકલ નિયમ

તે કેવી રીતે કામ કરે છે

વર્ટિકલ નિયમો તત્વ દ્વારા પ્રેરિત છે <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>