ยูทิลิตี้สำหรับเลย์เอาต์

การเปลี่ยนแปลงdisplay

ใช้ยูทิลิตีการแสดงผลของเราเพื่อสลับค่าทั่วไปของdisplayพร็อพเพอร์ตี้แบบ ตอบสนอง ผสมผสานกับระบบกริด เนื้อหา หรือส่วนประกอบ เพื่อแสดงหรือซ่อนไว้ในวิวพอร์ตเฉพาะ

ตัวเลือก Flexbox

Bootstrap สร้างขึ้นด้วย flexbox แต่ไม่ใช่ทุกองค์ประกอบที่displayได้รับการเปลี่ยนแปลงdisplay: flexเนื่องจากจะเป็นการเพิ่มการแทนที่ที่ไม่จำเป็นจำนวนมาก และเปลี่ยนลักษณะการทำงานของเบราว์เซอร์ที่สำคัญโดยไม่คาดคิด ส่วนประกอบส่วนใหญ่ของ เรา สร้างขึ้นโดยเปิดใช้งาน flexbox

หากคุณต้องการเพิ่มdisplay: flexองค์ประกอบ ให้ทำด้วย.d-flexหรือหนึ่งในตัวแปรที่ตอบสนอง (เช่น.d-sm-flex) คุณจะต้องใช้คลาสหรือdisplayค่านี้เพื่ออนุญาตให้ใช้ยูทิลิตี flexbox พิเศษของเรา สำหรับการปรับขนาด การจัดตำแหน่ง การเว้นวรรค และอื่นๆ

ขอบและช่องว่างภายใน

ใช้ยูทิลิตีmarginและ ระยะห่าง เพื่อควบคุมวิธีการเว้นระยะห่างและขนาดองค์ประกอบและส่วนประกอบ Bootstrap มีมาตราส่วนหกระดับสำหรับยูทิลิตี้การเว้นวรรค โดยยึดตามตัวแปรเริ่มต้น ของค่า เลือกค่าสำหรับวิวพอร์ตทั้งหมด (เช่นสำหรับใน LTR) หรือเลือกตัวแปรที่ตอบสนองเพื่อกำหนดเป้าหมายวิวพอร์ตเฉพาะ (เช่นสำหรับ—ใน LTR— เริ่มต้นที่จุดพัก)padding 1rem$spacer.me-3margin-right: 1rem.me-md-3margin-right: 1remmd

สลับvisibility

เมื่อdisplayไม่จำเป็นต้องสลับไปมา คุณสามารถสลับvisibilityองค์ประกอบด้วยยูทิลิตี้การมองเห็นของ เรา องค์ประกอบที่มองไม่เห็นจะยังคงส่งผลต่อเค้าโครงของหน้า แต่จะถูกซ่อนจากผู้เยี่ยมชม