如何使用Laravel更改前端的显示布局

Question

嗨，我以这种方式从数据库获取类别： https://ibb.co/3WtryYK，我想以这种方式显示它们 https://ibb.co/NnmBKkm ，我需要条件语句或循环这样的场景，并选择 2 个网格，一个类别显示在一个网格中，而另一个网格显示

法典：

@foreach($categories as $category)
<div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-02.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
{{ ucwords($category->category_name) }}
</a>
</div>
</div>

<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-05.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
Sunglasses
</a>
</div>
</div>
</div>
@endforeach

完整代码：

<section class="banner bgwhite p-t-40 p-b-40">
<div class="container">
<div class="row">
@foreach($categories as $category)
<div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-02.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
{{ ucwords($category->category_name) }}
</a>
</div>
</div>

<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-05.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
Sunglasses
</a>
</div>
</div>
</div>
@endforeach
<div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-03.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
Watches
</a>
</div>
</div>
<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-07.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
Footerwear
</a>
</div>
</div>
</div>
<div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/banner-04.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
Bags
</a>
</div>
</div>
<!-- block2 -->
<div class="block2 wrap-pic-w pos-relative m-b-30">
<img src="{{ asset('/images/frontend_images/icons/bg-01.jpg') }}" alt="IMG">
<div class="block2-content sizefull ab-t-l flex-col-c-m">
<h4 class="m-text4 t-center w-size3 p-b-8">
Sign up & get 20% off
</h4>
<p class="t-center w-size4">
Be the frist to know about the latest fashion news and get exclu-sive offers
</p>
<div class="w-size2 p-t-25">
<!-- Button -->
<a href="#" class="flex-c-m size2 bg4 bo-rad-23 hov1 m-text3 trans-0-4">
Sign Up
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

刀片解决方案：

基于进一步的植株：

<style>
.small{
height: 300px;
}
.big{
height: 700px;
}
</style>
@foreach($categories as $key => $category)
<div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
<!-- block1 -->
<div class="block1 hov-img-zoom pos-relative m-b-30 {{($key % 2 == 0 ? 'big' : 'small')}}">
<img src="{{ asset('/images/frontend_images/banner-02.jpg') }}" alt="IMG-BENNER">
<div class="block1-wrapbtn w-size2">
<!-- Button -->
<a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
{{ ucwords($category->category_name) }}
</a>
</div>
</div>
</div>
@endforeach

在这种情况下，@if会根据类别的键进行奇数/偶数选择。如果您只想要前两个或其他东西，请将@if更改为@if($key < 2).

---

JS/jQuery 解决方案我不确定你的问题是关于什么的，但我想这是关于显示堆叠的卡片。如果您的问题与其他内容有关，请澄清您的问题。

我认为您正在寻找一种JavaScript解决方案来堆叠这样的卡片。像这样：

• 砌体(JavaScript)
• Salvattore (jQuery)

Answer 2

Laravel不负责前端代码。您必须签入 CSS 文件。 也许您必须设置至少 3 个不同的网格。

祝你好运。