Trello benzeri bir Todo List uygulaması yapmaya çalışıyorum. $list değişkeni cards ile hasMany ilişkisine sahip. Sorunum ise: Listeleri foreach döngüsü ile çekiyorum ve listelerin içinde de sahip olduğu kartları göstermek istiyorum ancak cardları ekrana alt alta değil de bir li elementinin içinde yan yana eklenerek geliyor, sorun nedir?
@foreach($lists as $list)
<div class="col-3">
<div class="card">
<div class="card-title bg-gray p-2">{{$list->name}}</div>
<div class="card-body">
@if($list->cards()->exists())
<ul class="list-group">
<li class="list-group-item">{{$list->cards->pluck('title')->implode('')}} <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#exampleModal{{$list->cards->pluck('id')->implode('')}}"><i class="fa-solid fa-pencil"></i></button></li>
</ul>
@endif
<form class="AddCardForm" style="display: none">
<input type="hidden" name="list_id" value="{{$list->id}}">
<input type="hidden" name="user_id" value="{{Auth::user()->id}}">
<input type="text" name="title" class="p-4 form-control" placeholder="Kart Adı">
<button type="submit" class="mt-2 btn btn-success float-end">Ekle</button>
</form>
</div>
<button id="AddCard" data-id="{{$list->id}}" class="addCard btn btn-outline-warning text-dark text-left"><i class="fa-solid fa-plus"></i> Kart Ekle</button>
</div>
</div>
@include('partials.cardEdit')
@endforeach