Как я могу установить длину столбца в сетке в соответствии с количеством элементов в моей базе данных?

Я пытаюсь отображать баннеры в моем проекте laravel из базы данных в сетке. Но проблема в том, что если у меня есть 1 элемент в моей базе данных, я хочу, чтобы мой класс сетки был col-12, и если в моей базе данных более 1 элемента, я хочу, чтобы класс был col-6.

@if($status == 1)
<div style="background: {{$color}};">
    <div class="container">
        <div class="row">
        @foreach($data['banners'] as $banner )
        @if($banner->status==1)
        <div class="col-6 p-1">
                <div style="background-image:url(assets/images/{{$banner->bannerImage}});background-size: cover;height:55vh" class="jumbotron jumbotron-fluid">
                        <div class="container bannertext text-wrap">
                            <h1 class="">{{$banner->heading}}</h1>
                            <h3 class="">{{$banner->subHeading}}</h3>
                            <p class="lead">{{$banner->description}}</p>
                        </div>
                </div>
        </div>
        @endif
        @endforeach
        </div>
    </div>
</div>
@endif
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение. Проверьте, больше ли количество в базе данных, чем 1, затем используйте фрагмент col-6, иначе используйте фрагмент col-12.

@if(count($data['bannercount'])>1)

<div class="container">
    <div class="row">
        @foreach($data['banners'] as $banner )
        <div class="col-6">
            <div style="background-image:url(assets/images/{{$banner->bannerImage}});"
                class="jumbotron jumbotron-fluid">
                    <div class="container bannertext text-wrap">
                        <h1 class="">{{$banner->heading}}</h1>
                        <h3 class="">{{$banner->subHeading}}</h3>
                    <p class="lead">{{$banner->description}}</p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@else 
<div class="row">
    @foreach($data['banners'] as $banner )
    <div class="col-12">
        <div style="background-image:url(assets/images/{{$banner->bannerImage}});"
             class="jumbotron jumbotron-fluid">
            <div class="container bannertext text-wrap">
                <h1 class="">{{$banner->heading}}</h1>
                <h3 class="">{{$banner->subHeading}}</h3>
                <p class="lead">{{$banner->description}}</p>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endif

Другие вопросы по теме