ಲಂಬ ನಿಯಮ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಲಂಬ ನಿಯಮಗಳು ಅಂಶದಿಂದ ಸ್ಫೂರ್ತಿ ಪಡೆದಿವೆ <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>