在列中显示照片的问题

Question

我想以这样的方式显示我的照片。

PHOTO 1      PHOTO 2     |    PHOTO 5     PHOTO 6
                         |
PHOTO 3      PHOTO 4     |    PHOTO 7     PHOTO 8

使用当前代码，我明白了。

PHOTO 1  |  PHOTO 5
PHOTO 2  |  PHOTO 6
PHOTO 3  |  PHOTO 7
PHOTO 4  |  PHOTO 8

我在用 html/blade 编写 php 以从上面获取类似的列时遇到了麻烦。我知道他们应该放在不同的专栏中，但我不知道如何让它发挥作用。我希望我清楚我在这里想要实现的目标，如果不是，请告诉我。

感谢任何帮助。这是我的代码。

index.blade.php

<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">
    <div class="col border-line">
        <div class="row justify-content-center">
            <h4>Most popular ads</h4>
        </div>
        @if (isset($popularAdsResults))
            @foreach ($popularAdsResults as $popularAdsResult)
                <div class="row" style="margin-right:50px;">
                    <div class="col">
                        <a href="{{route('property.show',['id'=>$popularAdsResult->id])}}">
                            @if ($popularAdsResult->active == 'A')
                                <button class="btn btn-success" disabled="dissabled">Verified</button>
                            @endif
                                <img  class="img-fluid" src="/storage/{{$popularAdsResult->main_photo['original_src']}}/{{$popularAdsResult->main_photo['filename']}}" alt="Card image cap">
                                <button type="button" class="btn btn-lg btn-primary" disabled style="margin-top:10px;">{{$popularAdsResult->price}} eur</button>
                                <button type="button" class="btn btn-lg btn-primary" disabled style="margin-top:10px;">{{$popularAdsResult->quadrature}} m<sup>2</sup></button>
                                <button type="button" class="btn btn-lg btn-primary" disabled style="margin-top:10px; margin-bottom:10px;">{{$popularAdsResult->city}}</button>
                                <hr>
                        </a>
                    </div>

                </div>
            @endforeach
            <div class="row">
                <div class="col"></div>
                <div class="col"> {{$popularAdsResults->links()}}</div>
                <div class="col"></div>
            </div>
        @endif
    </div>



    <div class="col">
        <div class="row justify-content-center">
            <h4>Latest ads</h4>
        </div>

        @if (isset($latestAdsResults))
            @foreach ($latestAdsResults as $latestAdsResult)
                <div class="row" style="margin-left:50px;">
                    <div class="col">
                        <a href="{{route('property.show',['id'=>$latestAdsResult->id])}}">
                            @if ($latestAdsResult->active == 'A')
                                <button class="btn btn-success" disabled="dissabled">Verified</button>
                            @endif
                                <img  class="img-fluid" src="/storage/{{$latestAdsResult->main_photo['original_src']}}/{{$latestAdsResult->main_photo['filename']}}" alt="Card image cap">
                                <button type="button" class="btn btn-lg btn-primary" disabled style="margin-top:10px;">{{$latestAdsResult->price}} eur</button>
                                <button type="button" class="btn btn-lg btn-primary" disabled style="margin-top:10px;">{{$latestAdsResult->quadrature}} m<sup>2</sup></button>
                                <button type="button" class="btn btn-lg btn-primary" disabled style="margin-top:10px; margin-bottom:10px;">{{$latestAdsResult->city}}</button>
                                <hr>
                        </a>
                    </div>
                </div>
            @endforeach
            <div class="row">
                <div class="col"></div>
                <div class="col"> {{$latestAdsResults->links()}}</div>
                <div class="col"></div>
            </div>
        @endif
    </div>
</div>

Answer 1

我没有使用刀片的经验，但这可以帮助您如何使用引导程序构建 html：

<div class="row">
<div class="col-md-6">
    <div class="row">
        <div class="col-md-6">
            Photo 1
        </div>
        <div class="col-md-6">
            Photo 2
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            Photo 3
        </div>
        <div class="col-md-6">
            Photo 4
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="row">
        <div class="col-md-6">
            Photo 5
        </div>
        <div class="col-md-6">
            Photo 6
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            Photo 7
        </div>
        <div class="col-md-6">
            Photo 8
        </div>
    </div>
</div>