Tôi hiển thị trường tham chiếu thực thể chứa 4 hình ảnh (mục phương tiện). Theo mặc định, chúng được hiển thị trong 4 hàng bên dưới hàng kia. Tôi muốn hiển thị chúng cạnh nhau. Olivero là chủ đề tôi đang sử dụng.
Nếu tôi đặt .grid-full đến phần tử cha, thì thực sự 4 hình ảnh được sắp xếp theo cột. Tuy nhiên, chúng chỉ chiếm 1 cột trong số 14 cột của lưới.
Có vẻ như tôi phải thêm một cái gì đó như lưới-cột: 1/3; cho mỗi hình ảnh nhưng số lượng hình ảnh là động (có thể là 4 hoặc nhiều hơn) do đó tôi không thể biết trước các giá trị. Hãy để một mình tôi không thể chọn các thành phần riêng lẻ trong CSS vì chúng không có ID duy nhất.
Kịch bản tương tự thực sự đơn giản với Bootstrap. chỉ định col-sm sẽ thực hiện các mẹo.
Tôi tự hỏi liệu có giải pháp nào cho vấn đề của mình không và tại sao trong Olivero, cần phải chỉ định rõ ràng khoảng thời gian của từng cột.
HTML diễn ra như sau:
<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>
