พบพฤติกรรมแปลกๆ หลังจากทดสอบเว็บไซต์แบบตอบสนองบนมือถือและหวังว่าฉันจะได้รับข้อมูลเชิงลึกเกี่ยวกับสิ่งที่เกิดขึ้น โดยพื้นฐานแล้ว ฉันมีแถวบูตสแตรปแถวเดียวที่มีรูปภาพ 23 รูป ในความละเอียด iPhone ของฉัน (375 x 667) ฉันเห็นผลลัพธ์ที่แตกต่างกับวิธีการแสดงแถวเมื่อเปรียบเทียบกับเบราว์เซอร์บนเดสก์ท็อปที่ตั้งค่าความละเอียดนั้น
เป้าหมายของฉันคือให้รูปภาพแสดงคู่กันจนถึงบรรทัดสุดท้าย ซึ่งจะมีรูปภาพอยู่ตรงกลาง นอกเหนือจากคลาสแถว bootstrap มาตรฐานแล้ว ฉันยังได้เพิ่มคลาสชื่อ flex ซึ่งใช้ css ต่อไปนี้:
.flex {
display: flex;
justify-content: center;
flex-flow: row wrap;
position: relative;
}
HTML คล้ายกับสิ่งนี้:
<div class="row flex">
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
</div>
บนเดสก์ท็อป ไม่ว่าฉันจะสร้างหน้าจอเล็กแค่ไหน ภาพก็จะแสดงตามที่คาดไว้ ด้วยเหตุผลบางประการบนมือถือ รูปภาพแรกในกลุ่มคือรูปภาพที่แสดงด้วยตัวเอง และรูปภาพหลังจากนั้นจะแสดงเป็นคู่
เหตุใดพฤติกรรมการแสดงผลนี้จึงตรงกันข้ามกับเดสก์ท็อปและมือถือ
CodePen แสดงพฤติกรรมที่คาดหวัง: codepen.io/anon/pen/jZWGNj ปัญหาคือสิ่งนี้ทำงานตรงกันข้ามกับมือถืออย่างสิ้นเชิง (iPhone, Android, iPad)
แก้ไข: ฉันแค่อยากชี้แจงว่า 'คอลัมน์ที่กำหนดเอง' ในกรณีนี้เป็นเพียงคอลัมน์บูทสแตรปบรรจุกระป๋องเท่าที่เกี่ยวข้องกับค่าความกว้าง
