ฉันแสดงฟิลด์อ้างอิงเอนทิตีที่มีรูปภาพ 4 รูป (รายการสื่อ) โดยค่าเริ่มต้นจะแสดงเป็น 4 แถว โดยแถวหนึ่งจะอยู่ด้านล่างอีกแถวหนึ่ง ฉันต้องการที่จะแสดงพวกเขาเคียงข้างกัน Olivero เป็นธีมที่ฉันใช้
ถ้าฉันตั้งค่า .grid-เต็ม
ไปยังองค์ประกอบหลัก จากนั้นภาพทั้ง 4 ภาพจะถูกจัดเรียงในคอลัมน์ อย่างไรก็ตาม พวกเขาครอบครองเพียง 1 คอลัมน์จาก 14 คอลัมน์ของกริด
ดูเหมือนว่าฉันต้องเพิ่มบางอย่างเช่น ตาราง-คอลัมน์: 1/3;
ในแต่ละภาพแต่จำนวนภาพเป็นจำนวนไดนามิก (4 ขึ้นไปก็ได้) จึงไม่สามารถทราบค่าล่วงหน้าได้ นับประสาอะไรกับฉันไม่สามารถเลือกองค์ประกอบทีละรายการใน CSS เนื่องจากไม่มีรหัสเฉพาะ
สถานการณ์เดียวกันนั้นง่ายมากด้วย Bootstrap มอบหมายเพียง col-sm
จะได้ทำเคล็ดลับ
ฉันสงสัยว่ามีวิธีแก้ไขปัญหาของฉันหรือไม่ และเหตุใดใน Olivero จึงจำเป็นต้องระบุช่วงของแต่ละคอลัมน์อย่างชัดเจน
HTML มีลักษณะดังนี้:
<div class="field field--name-field-screenshots field--type-entity-reference field--label-visually_hidden">
<div class="field__label visually-hidden">Screenshots</div>
<div class="field__items">
<div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-01LoginScreen.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-01LoginScreen.png" width="270" height="480" alt="Tunedeck Login" title="" loading="lazy" typeof="foaf:Image">
</a>
</div>
<div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-02Search.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-02Search.png" width="270" height="480" alt="Search Music" title="" loading="lazy" typeof="foaf:Image">
</a>
</div>
<div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-03NowPlaying_0.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-03NowPlaying_0.png" width="270" height="480" alt="Now Playing" title="" loading="lazy" typeof="foaf:Image">
</a>
</div>
<div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-04Gestures.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-04Gestures.png" width="270" height="480" alt="Tunedeck - Gestures" title="" loading="lazy" typeof="foaf:Image">
</a>
</div>
</div>
</div>