Laravel - 2 деления друг на друга, один на следующий ряд, если не хватает места - PullRequest
Новая
       5

Laravel - 2 деления друг на друга, один на следующий ряд, если не хватает места

0 голосов
/ 10 апреля 2020

У меня есть страница, которая отображает много делений, в 2 на x сетке .. это код: 

<div class="row d-flex justify-content-around" >
@foreach(auth()->user()->galleries as $gallery)
        <div class="col-5
                    mb-5
                    p-3
                    rounded-lg
                    shadow
                    d-flex
                    justify-content-between
                    align-items-baseline
                    "                
             style="background-color: lightgrey;
                 background-size: 100%;
                 background-position: center;">
            <div class="w-75">
                <div class="">
                    <h2>{{$gallery->galname}}</h2>
                </div>
                <div class="">
                    SOME CONTENT...
                </div>
            </div>
            <div class="my-auto">
                <div class="d-flex justify-content-around p-1">
                    <button class="btn btn-primary" type="button" onclick="window.location='/gallery/{{ $gallery->id }}'">View / Edit</button>
                </div>                   
            </div>
        </div>
@endforeach
</div>

Пока все работает отлично, но если я уменьшу размер браузера или смотреть его по мобильному телефону, тогда они подскакивают sh вместе ... Я хотел бы, чтобы он был отзывчивым и переходил к следующему ряду, если нет доступного пространства enoguh ... таким образом, 2 на x становится таблицей 1 на 2x. .. как это можно сделать?

1 Ответ

1 голос
/ 10 апреля 2020

Вы можете добавить классы для адаптивного дизайна после col-5, то есть col-sm-10, который изменит размер div на маленьких экранах. 

.... class="col-5 col-sm-10 mb-5 ...

подробнее здесь

...