Bootstrap และ Masonry

รวมMasonryเข้ากับระบบกริด Bootstrap และส่วนประกอบการ์ด

การก่ออิฐไม่รวมอยู่ใน Bootstrap เพิ่มโดยการรวมปลั๊กอิน JavaScript ด้วยตนเองหรือใช้ CDN ดังนี้:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

การเพิ่มdata-masonry='{"percentPosition": true }'ลงใน.rowwrapper ทำให้เราสามารถรวมพลังของตารางตอบสนองของ Bootstrap และการวางตำแหน่งของ Masonry


Placeholder Image cap
ชื่อการ์ดที่ขึ้นบรรทัดใหม่

การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

Placeholder Image cap
ชื่อการ์ด

การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

ชื่อการ์ด

การ์ดใบนี้มีชื่อปกติและข้อความสั้นๆ ด้านล่าง

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

Placeholder Card image

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

ชื่อการ์ด

นี่คือการ์ดอีกใบที่มีชื่อและข้อความสนับสนุนด้านล่าง การ์ดใบนี้มีเนื้อหาเพิ่มเติมเพื่อทำให้โดยรวมสูงขึ้นเล็กน้อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว