วิธีทำให้กล่องสีตอบสนองโดยใช้ twitter bootstrap

ฉันสามารถนำ colorbox ไปใช้กับ boostrap ได้และมันใช้งานได้ แต่ฉันมีปัญหาในการทำให้มันตอบสนอง สิ่งที่ฉันหมายถึงคือรูปภาพหรือสไลด์โชว์จะเปิดอย่างถูกต้องในรูปแบบกล่องสีหากหน้ามีขนาดเต็ม แต่จะไม่เปิดโดยลดขนาดลงจนเหลือขนาดหน้าจอของเบราว์เซอร์ที่ย่อเล็กลง โดยจะเปิดขนาดเต็มในโหมดตอบสนองแบบย่อ ทำให้คุณต้องเลื่อนเพื่อดูรูปภาพหรือปิด ฉันรู้ว่าเป็นไปได้ที่จะปรับขนาดภาพหมุนโดยใช้:

img {ความกว้างสูงสุด:100%;}

นอกจากนี้ modal bootstrap จะปรับขนาดตามธรรมชาติซึ่งเป็นส่วนหนึ่งของฟังก์ชันการทำงานเมื่อใช้หรือเรียกอย่างถูกต้อง

ฉันยังคงเรียนรู้ทั้งหมดนี้และพยายามปรับแต่งมามากแต่ก็ไม่ประสบความสำเร็จ หลังจากพบโพสต์ที่ไม่ค่อยคล้ายกันสองสามโพสต์ในเว็บ

ข้อมูลเชิงลึกใด ๆ ที่จะได้รับการชื่นชม

ขอบคุณอีกครั้ง.....


person user1442988    schedule 07.06.2012    source แหล่งที่มา


คำตอบ (2)


ปัญหานี้ไม่จำเป็นต้องสัมพันธ์กับบูตสแตรป

ฉันพบโพสต์ที่คล้ายกันซึ่งกล่าวถึงหัวข้อกล่องสีนี้ และหนึ่งในคำตอบนั้นชี้ไปที่ไซต์กล่องสีอย่างเป็นทางการพร้อมวิธีแก้ปัญหา

และฉันสามารถยืนยันได้ว่าคำตอบนี้ใช้ได้ผล https://stackoverflow.com/a/13105833/728675

person RayLuo    schedule 30.12.2012

ในเวอร์ชันย่อของ colorbox.js ให้ค้นหา sting "initialWidth:"600",innerWidth:!1,maxWidth:!1," และแทนที่ด้วย defaultWidth:"600",innerWidth:!1,maxWidth:"100% ","

ในเวอร์ชันที่ไม่ย่อขนาด (หากคุณใช้งานอยู่) ให้แทนที่ "maxWidth: false" ด้วย "maxWidth: 100%"

person Cristian Vultur    schedule 26.05.2017