แผนกต้อนรับส่วนหน้าโครงการล่าสุดใช้ bootstrap.css + angularjs และพื้นหลังจะประมวลผลข้อมูลเท่านั้น (โดยใช้ PHP ผลการประมวลผลคือ json_encode โดยตรง ($ arr) ซึ่งเจ๋งมาก) การทดสอบเครื่องจำลองเกี่ยวกับโครเมี่ยมนั้นสมบูรณ์แบบและไม่มีการทดสอบเครื่องจักรจริง หลังจากเสร็จสิ้นฉันก็ตะลึงเมื่อฉันทดสอบทางโทรศัพท์ เมื่อฉันกวาดหน้าซ้ายและขวาแถบแนวตั้งเปล่าจะปรากฏขึ้น (ดังแสดงในรูปด้านล่าง) มีการพิจารณาว่าเป็นเพราะความยาวที่กำหนดโดยมาร์จิ้น-ขวา ตรวจสอบ CSS และไม่มีรหัสที่เกี่ยวข้อง ดูเหมือนว่าปัญหาจะเกิดขึ้นใน bootstrap แม้ว่ามันจะไม่ส่งผลกระทบต่อการใช้โปรแกรม แต่ก็รู้สึกอึดอัดใจมากและคุณต้องแก้ไข
ตรวจสอบหน้าและพบว่าปัญหานี้จะเกิดขึ้นเฉพาะในกรณีที่ใช้ระบบกริด ตรวจสอบ CSS ที่เกี่ยวข้องกับ. Row และพบว่าคำจำกัดความมาร์จิ้นของมันมีดังนี้:
.Row {margin-left: -15px; margin-right: -15px;}.ROW โดยทั่วไปจะใช้เป็นองค์ประกอบที่ต่ำกว่าของภาชนะและเป็นองค์ประกอบด้านบนของ .COL-XX-XX โดยวิธีการตรวจสอบ css ของ. container และ con-xx-xx:
.Container {padding-left: 15px; padding-right: 15px;}. col-xx-xx {padding-left: 15px; padding-right: 15px;}ระยะขอบด้านในขององค์ประกอบทั้งหมดของ. container มีระยะทาง 15px ซึ่งดูสวยงามมากและระยะขอบด้านในของ. col-xx-xx ยังตั้ง 15px สิ่งนี้จะไม่สอดคล้องกับองค์ประกอบของ. contariner (ระยะห่างระหว่าง. col-xx-xx และ. container คือ 30px) ดังนั้นองค์ประกอบองค์ประกอบแรสเตอร์แรกและองค์ประกอบแรสเตอร์สุดท้ายจะต้องตั้งค่าเป็น {padding-left: 0px;} และ {padding-right: 0px; สิ่งนี้จะแก้ปัญหาการจัดตำแหน่ง แต่หลังจากการตั้งค่าแม้ว่าความกว้างของแต่ละกริดจะเหมือนกันความกว้างของเนื้อหาที่แสดงคือ 15px ดังนั้นอัจฉริยะของ FB จึงใช้วิธีแก้ปัญหาของเส้นขอบด้านนอกเชิงลบอย่างชาญฉลาด การใช้งานรหัสไม่เพียง แต่ง่าย แต่ไม่มีปัญหาเกี่ยวกับความกว้างที่ไม่สอดคล้องกันของเนื้อหาที่แสดงในแต่ละแรสเตอร์
แม้ว่าการแก้ปัญหาของเส้นขอบด้านนอกเชิงลบนั้นดี แต่ก็จะทำให้เกิดเส้นขอบว่างบนหน้าจอขนาดเล็ก (ขั้วเคลื่อนที่) (จุดปวดที่จะแก้ไขในบทความนี้) การปรับแต่ง bootstrap แก้ปัญหานี้ แต่มันลำบากเกินไป วิธีที่ง่ายที่สุดคือการเขียน CS ที่เกี่ยวข้องใหม่
/* ต้องโทร* //* FUCK 15PX สำหรับ iPhone เริ่มต้นหลังจาก bootstrap.css */. row {margin: 0;}. col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7 .COL-LG-9, .COL-MD-1, .COL-MD-10, .COL-MD-11, .COL-MD-12, .COL-MD-2, .COL-MD-3, .COL-MD-4, .COL-MD-5, .COL-MD-6, .COL-MD-7 9, .COL-SM-1, .COL-SM-10, .COL-SM-11, .COL-SM-12, .COL-SM-2, .COL-SM-3, .COL-SM-4, .COL-SM-5, .COL-SM-6, .COL-SM-7, .COL-SM-8 XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6, .COL-XS-7, .COL-XS- FUCK 15PX สำหรับ iPhone มากกว่า */มันได้รับการแก้ไขอย่างประสบความสำเร็จเนื่องจากกริดไม่มีช่องว่างความกว้างของแต่ละรั้วเท่ากันความกว้างของเนื้อหาที่แสดงนั้นก็เหมือนกันและสามารถจัดแนวกับองค์ประกอบของภาชนะบรรจุ (หมายเหตุ: ผลที่ตามมานี้ก็ร้ายแรงมากนั่นคือเนื้อหาระหว่างแต่ละกริด
ข้างต้นคือเหตุผลและวิธีแก้ปัญหาสำหรับพื้นที่ว่างทางด้านขวาเมื่อ bootstrap.css ถูกกวาดบนโทรศัพท์มือถือ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!