我如何在引导程序中为索引设置不同的列排列和不同的卡片设计？

Posted 2023-02-21

我正在使用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列。通常，我们会尝试在设计中进行匹配。例如：

• [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检查要渲染的是前三张还是其他三张。这可能会变得有些混乱，具体取决于数据上有多少个“游戏”。并且您需要为此使用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。行是水平的，列是垂直的