在Laravel中根据条件切换CSS样式的实现求助

有两种常用的实现方式，你可以根据场景选择：

方法一：使用动态CSS类（推荐，符合样式分离原则） #

首先在你的CSS文件中定义专门的样式类：

/* 给付费服务器的flex-item设置金色边框 */
.flex-item.premium {
    border-color: gold;
    /* 如果原本flex-item没有边框，需要添加边框样式才能看到颜色，比如： */
    /* border-style: solid; */
    /* border-width: 1px; */
}

然后修改Blade代码，在flex-item的class中根据条件动态添加premium类：

<div class="flex-container">
    @foreach($topServers as $server)
        <div class="flex-item {{ $server->premium >= 1 ? 'premium' : '' }}">
            <div class="row">
                @foreach($guilds as $guild)
                    @if($server->id == $guild->id)
                        <img class="col-md-auto avatar" src="..." alt="">
                    @endif
                @endforeach
            </div>
        </div>
    @endforeach
</div>

Blade的三元运算符{{ 条件 ? '要添加的类' : '' }}会在$server->premium >= 1时自动把premium类加到元素上，触发对应的CSS样式。

方法二：内联样式（适合简单临时场景） #

如果不想额外定义CSS类，可以直接在元素上通过条件添加内联样式：

<div class="flex-container">
    @foreach($topServers as $server)
        <div class="flex-item" style="{{ $server->premium >= 1 ? 'border-color: gold;' : '' }}">
            <div class="row">
                @foreach($guilds as $guild)
                    @if($server->id == $guild->id)
                        <img class="col-md-auto avatar" src="..." alt="">
                    @endif
                @endforeach
            </div>
        </div>
    @endforeach
</div>

这种方式直接把样式写在元素上，优点是快速实现，缺点是样式和结构耦合，不利于后期维护。

注意事项 #

如果你的flex-item原本没有设置边框，只修改border-color不会有任何效果，需要同时设置border-style（比如solid）和border-width（比如1px）才能显示出边框颜色。

内容的提问来源于stack exchange，提问作者CARSAR