php - materializecss轮播中心对齐未知数量的卡片
问题描述
我有一个带有卡片的 materializecss 轮播的 laravel 8 项目。轮播默认显示 5 个项目。如果我在数据库中有 5 个或更多项目,那么一切都很好。但是,少于 5 个项目,项目堆叠在左侧。我需要他们始终处于中心位置,这与他们的数量无关。这是我的代码:
<div class="col s12 l12 center">
<div class="carousel center">
@foreach($properties as $property)
<div class="carousel-item col m4 s8 l3">
<div class="card sticky-action borders-top borders-bottom" style="height: 400px;">
<div class="card-image waves-effect waves-block waves-light" style="height: 50%;">
@if($property->cover() != NULL)
<img class="activator" src="{{ url($property->cover()) }}" alt="office" style="height: 100%;" />
@endif
</div>
<div class="card-content activator">
<p class="activator">@foreach($property->locations as $location)
{{ $location->name }}
@endforeach </p>
<span class="card-title activator grey-text text-darken-4"> {{ $property->property_address }}
<p class="activator"> {{ $property->starting_price }} kr</p>
</span>
<p class="activator">{{ $property->propertyType->name }} - {{ $property->m2 }} kvm, {{ $property->size }}</p>
<p class="activator">{{ $property->plot_size }} kvm tomt</p>
<div class="card-action">
<span class="activator left viewing">Visas: {{ \Carbon\Carbon::parse($property->viewing_date)->isoFormat('ddd D/M') }}</span>
<span class="activator right viewing_date bostadonline-text mr-1">Mer Info...</span>
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"> {{ $property->property_address }} <i class="material-icons right">close</i>
<p class="activator"> {{ $property->starting_price }} kr</p>
</span>
<p> {{ $property->short_description }} </p>
<p class="center"> <a href="{{ url('/fastigheter/' . $property->slug) }}" class="btn bostadonline-blue-bg-btn mt-2">Lägg bud </a></p>
</div>
</div>
</div>
@endforeach
</div>
</div>
解决方案
好吧,我把事情复杂化了。我已将 carousel 上的 fullWidth 设置为 true,这搞砸了。然后我添加了一些我必须删除的不必要的 css 修改。基本上,解决方案是在轮播属性上将 fullWidth 设置为 false。我不需要更改我的问题代码。
推荐阅读
- python - 如何根据输入 CSV 中的条件将上一行、当前行和下一行写入输出 CSV 文件
- ruby-on-rails - 解析 youtube RSS 提要
- gradle - Gradle 构建失败 - 颤振
- java - 使用 Page Factory 时,是在自己的页面中定义相似的元素还是只定义一次更好?
- javascript - Redux 状态设置对象到对象
- express - 结合车把和 Node/Express 使用 Vue
- cloud-init - 为什么我的 cloud-init 脚本没有运行?
- android-mediacodec - 如何从给定的缓冲区解码视频?(媒体编解码器)
- azure-cognitive-search - Azure 搜索服务突出显示的代码段
- package - 尝试安装 microsoft botbuilder 软件包时出现问题