अनुलंब नियम

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