ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
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>