Грид-система
Bootstrap Грид-система
Первое, что нужно знать: Bootstrap Грид-система использует 12 столбцов по умолчанию. Обычно мы стараемся соответствовать этому в наших проектах. Например:
- 3 карты : каждая карта занимает 4 столбца
- 2 карты : каждая карта получает 6 столбцов
- 5 карт : каждая карта занимает 2,4 столбца ... Упс! Не точное число!
Вот почему на скриншоте, который вы разместили, вы можете увидеть небольшой разрыв с каждой стороны второго ряда. Ряд с 5 картами не соответствует верхнему ряду с 3 картами. Таким образом, у вас может быть тот же дизайн со второй строкой, подобной этой:
<div class='row'>
<div class='col-1'><!-- This is just a space to help the math --></div>
<div class='col-2'>Card 1</div>
<div class='col-2'>Card 2</div>
<div class='col-2'>Card 3</div>
<div class='col-2'>Card 4</div>
<div class='col-2'>Card 5</div>
<div class='col-1'><!-- This is just a space to help the math --></div>
</div>
Посмотрите, как сумма столбцов равна 12?
Это до Flexbox .. .
Flexbox
Bootstrap 4 использует Flexbox, который является более гибким. Он по-прежнему имитирует сетку из 12 столбцов, поэтому вы не можете использовать Bootstrap классы по умолчанию (например: col-2) для достижения макета из 5 карт. Но вы можете создать свой собственный класс, используя flex-basis: 20% (100% / 5 = 20%).
Наконец, ваше решение
Используя один l oop
Чтобы использовать одну l oop, вы можете использовать $loop->index, чтобы проверить, делаете ли вы первые 3 карты или другие. Это может стать немного грязным, в зависимости от того, сколько «игр» у вас есть в ваших данных. И для этого вам нужно использовать Flexbox:
@foreach ($games as $game)
@if($loop->index < 3)
<div class="col-4 mt-3 d-flex align-items-stretch">
<div class="card landing-card">
<img src='{{ asset("storage/$game->image_location") }}' class="img-fluid">
<div class="card-body landing-card-body">
<h4 class="card-title landing-card-title">{{ $game->title }}</h4>
<p class="card-text landing-card-text">Summary: {{ $game->description }}</p>
<p class="card-text landing-card-text">Genre: {{ $game->genre->name }}</p>
</div>
<div class="card-footer landing-card-footer btn-group btn-block">
<form action='{{ url("/pending/$game->id/index" )}}'class="form-add-to-cart" data-id="{{ $game->id }}">
<div class="btn-group btn-block">
<button class="btn landing-card-button peach-gradient">Submit Request</button>
</div>
</form>
</div>
</div>
</div>
@else
<div class="my-flex-class-with-20%">
<img src='{{ asset("storage/$game->image_location") }}' class="img-fluid">
</div>
@endif
@endforeach
Использование нескольких циклов
Используя несколько циклов, вы можете получить либо тот же макет, который вы разместили, либо другие. Вам нужно разделить переменную $games на два массива. Один с первыми 3 «играми», а другой с остальными играми.
Ваш l oop в первом массиве будет аналогичен тому, который у вас уже есть, а ваш l oop в второй массив изменит классы CSS. В идеале, ваш второй массив должен быть массивом массивов, каждый из которых содержит количество игр, которое вы хотите. Это позволит вам каждый раз вставлять правильный row, что хорошо для вашего CSS.
Примерно так:
// Top row:
<div class='row'>
@foreach ($first_3_games as $game)
<div class="col-4">
Your content here
</div>
@endforeach
</div>
// $other_games = [[game1, game2, game3, game4, game5], [game6, game7, game8, game9, game10]]
// This replicates the layout on your question:
@foreach ($other_games as $game_list)
<div class='row'>
<div class="col-1"></div>
@foreach ($game_list as $game)
<div class="col-2">
Your content here
</div>
@endforeach
<div class="col-1"></div>
</div>
@endforeach
// This takes the whole space to match the top row with 3 games
@foreach ($other_games as $game_list)
<div class='row'>
@foreach ($game_list as $game)
<div class="custom-flex-basis-20%-class">
Your content here
</div>
@endforeach
</div>
@endforeach
PS. Просто Небольшое уточнение по вашему вопросу: вы хотите 3 элемента в первой строке , а не колонка . Ряд горизонтальный, столбец вертикальный ?