การ์ดของ Bootstrap มีคอนเทนเนอร์เนื้อหาที่ยืดหยุ่นและขยายได้พร้อมตัวเลือกและตัวเลือกที่หลากหลาย
เกี่ยวกับ
การ์ดเป็นคอนเทนเนอร์เนื้อหาที่ยืดหยุ่นและขยายได้ ประกอบด้วยตัวเลือกสำหรับส่วนหัวและส่วนท้าย เนื้อหาที่หลากหลาย สีพื้นหลังตามบริบท และตัวเลือกการแสดงผลที่มีประสิทธิภาพ หากคุณคุ้นเคยกับ Bootstrap 3 การ์ดจะเข้ามาแทนที่แผง บ่อน้ำ และภาพขนาดย่อแบบเก่าของเรา ฟังก์ชันที่คล้ายคลึงกันกับส่วนประกอบเหล่านั้นมีให้เป็นคลาสตัวปรับแต่งสำหรับการ์ด
ตัวอย่าง
การ์ดถูกสร้างขึ้นด้วยมาร์กอัปและรูปแบบที่น้อยที่สุดเท่าที่จะเป็นไปได้ แต่ยังคงสามารถควบคุมและปรับแต่งได้มากมาย สร้างขึ้นด้วย flexbox ทำให้จัดตำแหน่งได้ง่ายและผสมผสานกับส่วนประกอบ Bootstrap อื่นๆ ได้ดี ไม่มีmargin
โดยค่าเริ่มต้น ดังนั้นให้ใช้ยูทิลิตี้การเว้นวรรคตามต้องการ
ด้านล่างนี้คือตัวอย่างการ์ดพื้นฐานที่มีเนื้อหาผสมและความกว้างคงที่ การ์ดไม่มีความกว้างตายตัวในการเริ่มต้น ดังนั้นการ์ดจะเติมความกว้างเต็มขององค์ประกอบหลักโดยธรรมชาติ ปรับแต่งได้ง่ายด้วยตัวเลือกขนาดต่างๆ ของเรา
ชื่อการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ไปที่ไหนสักแห่ง
ประเภทเนื้อหา
การ์ดรองรับเนื้อหาที่หลากหลาย รวมถึงรูปภาพ ข้อความ กลุ่มรายการ ลิงก์ และอื่นๆ ด้านล่างนี้เป็นตัวอย่างของสิ่งที่ได้รับการสนับสนุน
ร่างกาย
การสร้างบล็อคของการ์ดคือ.card-body
. ใช้เมื่อใดก็ตามที่คุณต้องการส่วนบุนวมภายในการ์ด
นี่คือข้อความบางส่วนภายในเนื้อหาของการ์ด
ชื่อเรื่อง ข้อความ และลิงก์
ชื่อการ์ดถูกใช้โดยการเพิ่ม.card-title
แท็<h*>
ก ในทำนองเดียวกัน ลิงก์จะถูกเพิ่มและวางติดกันโดยการเพิ่ม.card-link
ลงใน<a>
แท็ก
คำบรรยายถูกใช้โดยการเพิ่ม a .card-subtitle
ลงใน<h*>
แท็ก หาก วางรายการ .card-title
และ.card-subtitle
รายการไว้ใน.card-body
รายการ ชื่อการ์ดและคำบรรยายจะจัดตำแหน่งอย่างสวยงาม
ชื่อการ์ด
คำบรรยายการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ลิงค์การ์ด ลิงค์
อื่น
รูปภาพ
.card-img-top
วางรูปภาพไว้บนสุดของการ์ด ด้วย.card-text
คุณสามารถเพิ่มข้อความลงในการ์ดได้ ข้อความภายใน.card-text
สามารถกำหนดสไตล์ด้วยแท็ก HTML มาตรฐานได้
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
รายชื่อกลุ่ม
สร้างรายการเนื้อหาในการ์ดที่มีกลุ่มรายการล้าง
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
อ่างล้างจาน
ผสมผสานและจับคู่เนื้อหาหลายประเภทเพื่อสร้างการ์ดที่คุณต้องการ หรือใส่ทุกอย่างลงไป ด้านล่างนี้คือสไตล์รูปภาพ บล็อก สไตล์ข้อความ และกลุ่มรายการ ทั้งหมดนี้รวมอยู่ในการ์ดความกว้างคงที่
ชื่อการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
เพิ่มส่วนหัวและ/หรือส่วนท้ายที่ไม่บังคับภายในการ์ด
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
ส่วนหัวของการ์ดสามารถจัดสไตล์ได้โดยการ.card-header
เพิ่ม<h*>
องค์ประกอบ
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
ขนาด
การ์ดไม่มีความเฉพาะเจาะจงwidth
ในการเริ่ม ดังนั้นการ์ดจะมีความกว้าง 100% เว้นแต่จะระบุไว้เป็นอย่างอื่น คุณสามารถเปลี่ยนแปลงสิ่งนี้ได้ตามต้องการด้วย CSS แบบกำหนดเอง คลาสกริด มิกซ์อิน Sass ของกริด หรือยูทิลิตี้
การใช้มาร์กอัปกริด
ใช้กริด ห่อการ์ดในคอลัมน์และแถวตามต้องการ
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การใช้สาธารณูปโภค
ใช้ยูทิลิตี้การปรับขนาดที่มีอยู่ จำนวนหนึ่ง เพื่อกำหนดความกว้างของการ์ดอย่างรวดเร็ว
ชื่อการ์ด
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ปุ่ม
ชื่อการ์ด
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ปุ่ม
การใช้ CSS . ที่กำหนดเอง
ใช้ CSS ที่กำหนดเองในสไตล์ชีตของคุณหรือเป็นสไตล์อินไลน์เพื่อกำหนดความกว้าง
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การจัดตำแหน่งข้อความ
คุณสามารถเปลี่ยนการจัดแนวข้อความของการ์ดใดก็ได้—ในทั้งหมดหรือบางส่วน—ด้วยคลาสการจัดข้อความของ เรา
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การนำทาง
เพิ่มการนำทางไปยังส่วนหัวของการ์ด (หรือบล็อก) ด้วยส่วนประกอบการนำ ทาง ของ Bootstrap
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง
รูปภาพ
การ์ดมีตัวเลือกสองสามอย่างสำหรับการทำงานกับรูปภาพ เลือกจากการเพิ่ม "ตัวพิมพ์ใหญ่รูปภาพ" ที่ปลายด้านใดด้านหนึ่งของการ์ด ภาพซ้อนทับที่มีเนื้อหาในการ์ด หรือเพียงแค่ฝังภาพลงในการ์ด
แคปรูปภาพ
เช่นเดียวกับส่วนหัวและส่วนท้าย การ์ดสามารถรวม "ตัวพิมพ์ใหญ่รูปภาพ" ด้านบนและด้านล่าง—ภาพที่ด้านบนหรือด้านล่างของการ์ด
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ภาพซ้อนทับ
เปลี่ยนรูปภาพเป็นพื้นหลังของการ์ดและซ้อนทับข้อความในการ์ดของคุณ คุณอาจต้องการหรือไม่ต้องการสไตล์หรือยูทิลิตี้เพิ่มเติม ทั้งนี้ขึ้นอยู่กับรูปภาพ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
โปรดทราบว่าเนื้อหาไม่ควรเกินความสูงของภาพ หากเนื้อหามีขนาดใหญ่กว่ารูปภาพ เนื้อหาจะแสดงนอกรูปภาพ
แนวนอน
ด้วยการใช้คลาสกริดและยูทิลิตี้ร่วมกัน คุณสามารถสร้างการ์ดในแนวนอนในลักษณะที่เหมาะกับอุปกรณ์พกพาและตอบสนองได้ ในตัวอย่างด้านล่าง เราเอารางน้ำกริดออก.no-gutters
และใช้.col-md-*
คลาสเพื่อทำให้การ์ดอยู่ในแนวนอนที่md
จุดพัก อาจจำเป็นต้องปรับเปลี่ยนเพิ่มเติมขึ้นอยู่กับเนื้อหาในบัตรของคุณ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
รูปแบบการ์ด
การ์ดมีตัวเลือกมากมายสำหรับปรับแต่งพื้นหลัง เส้นขอบ และสี
พื้นหลังและสี
ใช้ยูทิลิตี้ข้อความและพื้นหลังเพื่อเปลี่ยนรูปลักษณ์ของการ์ด
ชื่อบัตรหลัก
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อบัตรรอง
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดความสำเร็จ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดอันตราย
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดคำเตือน
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดข้อมูล
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดไฟ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดมืด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-only
ชั้นเรียน
ชายแดน
ใช้ยูทิลิตี้เส้นขอบเพื่อเปลี่ยนเฉพาะborder-color
การ์ด โปรดทราบว่าคุณสามารถใส่.text-{color}
คลาสบนพาเรน.card
ต์หรือส่วนย่อยของเนื้อหาของการ์ดดังที่แสดงด้านล่าง
ชื่อบัตรหลัก
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อบัตรรอง
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดความสำเร็จ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดอันตราย
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดคำเตือน
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดข้อมูล
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดไฟ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดมืด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ยูทิลิตี้ผสม
คุณยังสามารถเปลี่ยนเส้นขอบบนส่วนหัวและส่วนท้ายของการ์ดได้ตามต้องการ หรือแม้แต่ลบออกbackground-color
ด้วย.bg-transparent
.
ชื่อการ์ดความสำเร็จ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
แบบการ์ด
นอกเหนือจากการจัดรูปแบบเนื้อหาภายในการ์ดแล้ว Bootstrap ยังมีตัวเลือกสองสามตัวสำหรับการจัดวางชุดการ์ด ในขณะนี้ ตัวเลือกเลย์เอาต์เหล่านี้ยังไม่ตอบสนอง
กลุ่มบัตร
ใช้กลุ่มการ์ดเพื่อแสดงการ์ดเป็นองค์ประกอบเดียวที่แนบด้วยคอลัมน์ที่มีความกว้างและความสูงเท่ากัน กลุ่มบัตรเริ่มวางซ้อนกันและใช้display: flex;
เพื่อติดให้มีขนาดเท่ากันโดยเริ่มจากsm
จุดพัก
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
เมื่อใช้กลุ่มการ์ดที่มีส่วนท้าย เนื้อหาจะเรียงกันโดยอัตโนมัติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
สำรับไพ่
ต้องการชุดการ์ดความกว้างและความสูงที่เท่ากันซึ่งไม่ได้ต่อกันหรือไม่? ใช้สำรับไพ่
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
เช่นเดียวกับกลุ่มไพ่ ส่วนท้ายของไพ่ในสำรับจะเรียงกันโดยอัตโนมัติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
การ์ดกริด
ใช้ระบบกริด Bootstrap และ.row-cols
คลาสเพื่อควบคุมจำนวนคอลัมน์กริด (ล้อมรอบการ์ดของคุณ) ที่คุณแสดงต่อแถว ตัวอย่างเช่น นี่คือ.row-cols-1
การจัดวางไพ่ในคอลัมน์เดียว และ.row-cols-md-2
แยกไพ่สี่ใบให้มีความกว้างเท่ากันในหลายแถว จากเบรกพอยต์ขนาดกลางขึ้นไป
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
เปลี่ยนเป็น.row-cols-3
และคุณจะเห็นการห่อไพ่ใบที่สี่
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
เมื่อต้องการความสูงเท่ากัน ให้เพิ่มลง.h-100
ในการ์ด หากคุณต้องการความสูงเท่ากันโดยค่าเริ่มต้น คุณสามารถตั้งค่า$card-height: 100%
ใน Sass
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
นี่คือการ์ดสั้น
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
คอลัมน์การ์ด
การ์ดสามารถจัดเป็น คอลัมน์แบบ Masonryด้วย CSS ได้โดยการใส่ไว้ใน.card-columns
. การ์ดสร้างขึ้นด้วยcolumn
คุณสมบัติ CSS แทน flexbox เพื่อให้จัดตำแหน่งได้ง่ายขึ้น ไพ่เรียงจากบนลงล่างและซ้ายไปขวา
หัวขึ้น! ไมล์สะสมของคุณกับคอลัมน์การ์ดอาจแตกต่างกันไป เพื่อป้องกันไม่ให้ไพ่แตกในคอลัมน์ เราต้องตั้งค่าให้display: inline-block
เป็น การ์ดที่ column-break-inside: avoid
ยังไม่สามารถกันกระสุนได้
ชื่อการ์ดที่ขึ้นบรรทัดใหม่
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat
ชื่อการ์ด
การ์ดใบนี้มีชื่อเรื่องปกติและข้อความย่อหน้าด้านล่าง
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
ชื่อการ์ด
นี่คือการ์ดอีกใบที่มีชื่อและข้อความสนับสนุนด้านล่าง การ์ดใบนี้มีเนื้อหาเพิ่มเติมเพื่อทำให้โดยรวมสูงขึ้นเล็กน้อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
คอลัมน์การ์ดสามารถขยายและปรับแต่งได้ด้วยรหัสเพิ่มเติม ด้านล่างนี้คือส่วนขยายของ.card-columns
คลาสที่ใช้ CSS เดียวกันกับที่เราใช้—คอลัมน์ CSS— เพื่อสร้างชุดของระดับที่ตอบสนองสำหรับการเปลี่ยนจำนวนคอลัมน์