กฎแนวตั้ง

มันทำงานอย่างไร

กฎแนวตั้งได้รับแรงบันดาลใจจาก<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>