Laravel

Question

我有一个显示很多 div 的页面，在 2 x 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>

到目前为止它运行良好，但如果我减小浏览器的大小或在手机上观看它，它们就会挤在一起。我希望它能够响应并在没有时跳转到下一行enoguh space 可用..所以 2 x x 变成 1 x 2x table...这怎么能做到？

Answer 1

您可以在 col-5 之后为响应式设计添加类，即 col-sm-10，这将在小屏幕中更改 div 的大小。

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

more info here

Laravel - 2 个 div，如果不够，一个到下一行 space

Laravel - 2 divs by each other, one to the next row if not enough space

responsive