Отображение сообщений в пользовательской формации

Question

Я хотел бы выводить сообщения в порядке, указанном на этом изображении (каждые 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>

Для этих маленьких блоков тег "article" имеет class = "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

нет необходимости делать это в бэкэнде. Используйте функциональность CSS для nth-child:

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

Answer 3

Дайте класс 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 4

попробуйте следующий код

@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 5

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">

Или вы можете просто использовать CSS nth-child

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