મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
in English

વર્ટિકલ નિયમ

<hr>તત્વ જેવા વર્ટિકલ ડિવાઈડર બનાવવા માટે કસ્ટમ વર્ટિકલ રૂલ હેલ્પરનો ઉપયોગ કરો .

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

વર્ટિકલ નિયમો તત્વ દ્વારા પ્રેરિત છે <hr>, જે તમને સામાન્ય લેઆઉટમાં વર્ટિકલ ડિવાઈડર બનાવવાની મંજૂરી આપે છે. તેઓ <hr>તત્વોની જેમ જ શૈલીયુક્ત છે:

  • તેઓ 1pxપહોળા છે
  • તેમની પાસે min-heightછે1em
  • currentColorતેમનો રંગ અને દ્વારા સેટ કરવામાં આવે છેopacity

જરૂરિયાત મુજબ વધારાની શૈલીઓ સાથે તેમને કસ્ટમાઇઝ કરો.

ઉદાહરણ

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

વર્ટિકલ નિયમો ફ્લેક્સ લેઆઉટમાં તેમની ઊંચાઈ માપે છે:

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

સ્ટેક્સ સાથે

તેઓ સ્ટેક્સમાં પણ વાપરી શકાય છે :

પ્રથમ વસ્તુ
બીજી વસ્તુ
ત્રીજી વસ્તુ
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>