我正在使用bootstrap和laravel制作网站。我需要一些设计和布局帮助。我正在使用foreach在索引页上显示我的资产,但我想在第一整列上将其显示为3张大卡片,并在第二列显示完整的详细信息。
我应该如何进行?谢谢。
编辑:类似this。我目前拥有的就像第一列。我可以只在一个foreach中执行此操作,以便它是动态的,并且每个添加的新资产都将显示在3张大卡上吗?
@foreach ($games as $game)
<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>
@endforeach
首先要知道的是:Bootstrap Grid系统默认使用12列。通常,我们会尝试在设计中进行匹配。例如:
这就是为什么在您发布的屏幕截图中,您可以在第二行的每一侧看到一些缝隙。 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 ...
Bootstrap 4使用Flexbox,它更加灵活。它仍然模拟12列网格,因此您不能使用Bootstrap默认类(例如:col-2
)来实现5张卡片的布局。但是您可以使用flex-basis: 20%
(100%/ 5 = 20%)创建自己的类。
要使用一个循环,可以使用$loop->index
检查要渲染的是前三张还是其他三张。这可能会变得有些混乱,具体取决于数据上有多少个“游戏”。并且您需要为此使用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
变量分成两个数组。一个带有前三个“游戏”,另一个带有其余的游戏。
您在第一个数组中的循环将类似于您已经拥有的循环,而在第二个数组中的循环将更改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 .:对您的问题仅作一点澄清:您希望第一个row中有3个项目,而不是column。行是水平的,列是垂直的😀