Я хочу нарисовать четыре разных списка справа. Но я не знаю, как это решить, потому что один и тот же список повторяется вертикально вот так.
Форма, которую я хочу, это
1234
4567
Я хочу такую форму.
Это мой html-код.
@foreach($penpals as $penpal)
<div class = "row">
<div class = "col" style = "border:1px solid red">
<table border>
<tr style = "border:1px solid red">
<td>
@if ($penpal->image != null)
<a href = "#"><img src = "{{ $penpal->image }}" alt = "No Image"
style = "max-width: none; height: 170px; display: inline; " height = "170px" width = "170px"
class = "img-thumbnail"></a>
@else
<a href = "#"><img src = "{{ asset("data/ProjectImages/master/logoImage/6.png") }}" alt = "No Image"
style = "max-width: none; height: 170px; display: inline; " height = "170px" width = "170px"
class = "img-thumbnail"></a>
@endif
</td>
</tr>
<tr class = "text-center">
<td>
{{ $penpal->user->name }}
@if ($penpal->user->gender == 'men')
<img src = "{{ asset("data/ProjectImages/master/men.png") }}" alt = "men">
@else
<img src = "{{ asset("data/ProjectImages/master/women.png") }}" alt = "women">
@endif
{{ $penpal->user->age }}
@if ($penpal->user->country == 'ko')
<img src = "{{ asset("data/ProjectImages/master/korea.png") }}" alt = "men">
@else
<img src = "{{ asset("data/ProjectImages/master/japan.png") }}" alt = "women">
@endif
</td>
</tr>
</table>
</div>
<div class = "col" style = "border:1px solid red">
</div>
<div class = "col" style = "border:1px solid red">
3 of 3
</div>
<div class = "col" style = "border:1px solid red">
4 of 4
</div>
</div>
@endforeach
Я чередую итерации и вставляю данные в оставшийся один div, но я не знаю, как упорядочить данные в оставшихся трех div.
Вы можете использовать метод сбора laravel chunk()
(https://laravel.com/docs/5.8/collections#method-chunk).
Метод chunk разбивает коллекцию на несколько меньших коллекций заданного размера:
@foreach($penpals->chunk(4) as $penpalsGroup)
<div class = "row">
@forach($penpalsGroup as $penpal)
<div class = "col" style = "border:1px solid red">
<table border>
<tr style = "border:1px solid red">
<td>
@if ($penpal->image)
<a href = "#">
<img
src = "{{ $penpal->image }}"
alt = "No Image"
style = "max-width: none; height: 170px; width: 170px; display: inline; "
class = "img-thumbnail" />
</a>
@else
<a href = "#">
<img
src = "{{ asset("data/ProjectImages/master/logoImage/6.png") }}"
alt = "No Image"
style = "max-width: none; height: 170px; width: 170px; display: inline;"
class = "img-thumbnail" />
</a>
@endif
</td>
</tr>
<tr class = "text-center">
<td>
{{ $penpal->user->name }}
@if ($penpal->user->gender == 'men')
<img src = "{{ asset("data/ProjectImages/master/men.png") }}" alt = "men">
@else
<img src = "{{ asset("data/ProjectImages/master/women.png") }}" alt = "women">
@endif
{{ $penpal->user->age }}
@if ($penpal->user->country == 'ko')
<img src = "{{ asset("data/ProjectImages/master/korea.png") }}" alt = "men">
@else
<img src = "{{ asset("data/ProjectImages/master/japan.png") }}" alt = "women">
@endif
</td>
</tr>
</table>
</div>
@endforeach
</div>
@endforeach
Я думаю, что ваша проблема заключается в попытке решить вашу проблему с помощью таблицы, а не css или бутстрапа, если вы используете бутстрап, я думаю, да, вы можете сделать что-то вроде этого:
<div class = "row">
@foreach( $penpals as $penpal )
<div class = "col-3">
//Content here
</div>
@endforeach
</div>
Он должен работать.