Question

我想按此图像提供的顺序输出帖子（每3个帖子）

posts formation that is needed

这是我的刀片服务器代码：

public todaymax2 = {year:  this.year , month: this.month, day: this.day}

对于那些小块，“文章”标签具有类=“ blog_style1 small”

我想这里需要使用“ for”循环，所以有人可以帮助我完成这项任务并解释一下它是如何工作的吗？

Answer 1

看看，您需要告诉代码三个图像中的一个必须宽。这样您就可以使用模数：

@foreach ($raksti as $key => $value)
    @if($key % 3 = 0)
       // set width 100%
    @else
       // set width 50%
    @endif
@endforeach

这使得每三个元素的宽度为100％。

Answer 2

Laravel具有循环变量：

https://laravel.com/docs/5.8/blade#the-loop-variable

您可以在您的foreach中使用$loop->index并检查您的文章是否必须具有类small

<article class="blog_style1 @if($loop->index % 3 !== 0) small @endif">

或者您可以简单地使用CSS nth-child

https://css-tricks.com/how-nth-child-works/

Answer 3

尝试下一个代码

@foreach ($raksti as $key => $raksts)
 //
 @if($key % 3 == 1)
 // set here style css width 100 %

 @else
 // set here style css width 50 %
 @endif
@endforeach

Answer 4

给类small每三个元素

<section class="blog_area p_120">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="blog_left_sidebar">
                    @foreach ($raksti as $key => $raksts)
                    <article class="blog_style1 {{ ($key % 3 != 0) ? 'small' : ''  }}">
                        <div class="blog_img">
                            <img class="img-fluid" src="{{$raksts->image}}" alt="">
                        </div>
                        <div class="blog_text">
                            <div class="blog_text_inner">
                                <div class="cat">
                                    <a class="cat_btn" href="#">{{$raksts->kato->title}}</a>
                                    <i class="fa fa-calendar" aria-hidden="true"></i> {{$raksts->created_at}}
                                    <i class="fa fa-comments-o" aria-hidden="true"></i> 05
                                </div>
                                <a href="#">
                                    <h4>{{$raksts->title}}</h4>
                                </a>
                                <p>{{$raksts->short_desc}}</p>
                                <a class="blog_btn" href="#">Lasīt vairāk</a>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

希望这对您有帮助

Answer 5

无需在后端执行此操作。使用CSS的第n个子功能：

.blog_style1{
    width: 50%;
}
.blog_style1:nth-child(4n){
    width: 100%;
}

以自定义格式显示帖子

5 个答案: