Как не переносить список статей при увеличении?

Question

[prewordeSSS]

У меня есть такой кусок кода:

<div class="container-fluid mt-4">
            <div class="row justify-content-start">
                @foreach($list->all() as $blog)
                    @foreach($blog->blogs->all() as $textBlog)
                        <div class="col-auto mb-3 table_data">
                            <a
                                href="{{route('blog.show',['slug'=>$blog->slug])}}"
                                class="btn">
                                <div class="card" style="width: 18rem; height: 21rem">
                                    <div class="card-body">
                                        <div>
                                            <img src="<?=$textBlog->file->filename?>" class="card-img-top"
                                                 width="40" height="40"
                                                 alt="...">
                                        </div>
                                        <h5 class="card-title" style=""><?= $textBlog ?>
                                        </h5>
                                        <p class="card-text mb-4"><?= $textBlog->description . '...' ?>
                                        </p>
                                        <div class="blog__btn">
                                            {{__("Read")}}
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>

Где отображаются через цикл первые 4 статьи. Как я могу не переносить их на другую строку при увеличении страницы? Сейчас, если увеличение на 150%, то на будут на одной строчке 3 статьи, а на другой 1 и так далее.
Пробовал сделать так:

<div class="container-fluid mt-4" style="white-space: nowrap;">
            <div class="row justify-content-start" style="display:inline-block">

Но это работает не совсем как надо, переносы до сих пор есть

Comments

[Ankhena]

Кто-то же написал в вашем коде col-auto...

[prewordeSSS]

Ankhena, Пробовал col-xl-3, но при увеличении есть перенос всех статей на отдельную строку, что тоже не совсем то что мне нужно

[Сергей delphinpro]

https://getbootstrap.com/docs/5.2/layout/grid/

Answer 1

[Сергей delphinpro]

prewordeSSS, вы от балды пробуете разные варианты? =))

col-xl-* – это для больших экранов.
Когда вы масштабируте страницу, логическое разрешение у нее уменьшается, вплоть до мобильного представления. Если вам, вне зависимости от размера вьюпорта необходимо выводить четыре колонки, то так и пишите col-3
Но лучше, все-таки на мобильниках выводить в одну колонку, на планшетах, например в две, дальше уже четыре.
Как-то так, примерно
class="col-12 col-sm-6 col-md-3"