ऊर्ध्वाधर नियम

<hr>एलिमेण्ट् इव ऊर्ध्वाधरविभाजकं निर्मातुं कस्टम् ऊर्ध्वाधरनियमसहायकस्य उपयोगं कुर्वन्तु ।

इस पृष्ठ पर

कथं कार्यं करोति

ऊर्ध्वाधरनियमाः तत्त्वेन प्रेरिताः भवन्ति <hr>, येन सामान्यविन्यासेषु ऊर्ध्वाधरविभाजकाः निर्मातुं शक्नुवन्ति । ते <hr>तत्त्वानां इव एव शैलीकृताः सन्ति:

ते 1pxविस्तृताः सन्ति
तेषां अस्ति min-heightof1em
तेषां वर्णः 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>