css - 如何在 Bootstrap 中为我的索引设置不同的列排列和不同的卡片设计？

Question

我正在使用 bootstrap 和 laravel 做一个 crud 网站。我在设计和布局方面需要一些帮助。我正在使用 foreach 在索引页上显示我的 Assets ，但我想将其显示为 3 张大卡片，在第一个完整列中包含完整的详细信息，在第二列中显示 5 个包含较少详细信息的小卡片。

我应该如何进行？谢谢。

编辑:类似于 this .我目前拥有的就像第一列。我可以只在一个 foreach 中执行此操作，以便它是动态的并且添加的每个新 Assets 都会显示在 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

Answer 1

网格系统

Bootstrap 网格系统

首先要知道的是:Bootstrap Grid系统默认使用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%)。

---

最后，你的解决方案

使用一个循环

要使用一个循环，您可以使用 $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 个“游戏”，另一个用于其余游戏。

您在第一个数组中的循环将类似于您已有的循环，而您在第二个数组中的循环将更改 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 个元素，而不是列。行是水平的，列是垂直的 😀