我想显示我的照片。
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>
答案 0 :(得分:0)
我没有使用Blade的经验,但这可以帮助您如何使用bootstrap构建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>