0

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

需要的职位形成

这是我的刀片代码：

<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 $raksts)
                    <article class="blog_style1">
                        <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>

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

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

4

5 回答 5

1

看一看，你需要告诉你的代码，一张三张图片必须是宽的。这样您就可以使用模数：

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

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

于 2019-10-29T13:55:34.743 回答
0

Laravel 有循环变量：

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

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

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

或者你可以简单地使用 CSSnth-child

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

于 2019-10-29T13:59:07.847 回答
0

尝试下一个代码

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

 @else
 // set here style css width 50 %
 @endif
@endforeach
于 2019-10-29T13:59:27.753 回答
0

给类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>

希望这可以帮助你

于 2019-10-29T13:59:38.833 回答
0

无需在后端执行此操作。使用 CSS 的 nth-child 功能：

.blog_style1{
    width: 50%;
}
.blog_style1:nth-child(4n){
    width: 100%;
}
于 2019-10-29T14:00:39.983 回答