నిలువు నియమం

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