ਲੰਬਕਾਰੀ ਨਿਯਮ

ਕਿਦਾ ਚਲਦਾ

ਵਰਟੀਕਲ ਨਿਯਮ ਤੱਤ ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਹੁੰਦੇ ਹਨ <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>