[站长原创]改变子比主题图文视频封面卡片的排列布局

主题设置定义了一个有多少个，但是不是每个人都能凑到那么多

比如这次：主题要求12个，我只有10个

电脑端是一行，手机端分为两行

解决方法

代码

<div class="widget-graphic-cover mb10"><div style="--font-size:18px;"><div class="row gutters-5"><div class="col-sm-1 col-xs-2"><a href="https://yizhi2024.top/category/ym"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913142714811-2.png" src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913142714811-2.png" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a href="https://yizhi2024.top/category/zhutimuban"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/06/主题模板卡片.webp" src="https://yizhi2024.top/wp-content/uploads/2024/06/主题模板卡片.webp" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a href="https://yizhi2024.top/category/jc-2"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/06/教学教程卡片.webp" src="https://yizhi2024.top/wp-content/uploads/2024/06/教学教程卡片.webp" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a href="https://yizhi2024.top/category/rj"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/06/软件工具卡片.webp" src="https://yizhi2024.top/wp-content/uploads/2024/06/软件工具卡片.webp" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a href="https://yizhi2024.top/category/jc-2/zhutimeihua"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/08/20240809003900198-主题美化.png" src="https://yizhi2024.top/wp-content/uploads/2024/08/20240809003900198-主题美化.png" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a href="https://yizhi2024.top/category/xz"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/06/小众分类卡片.webp" src="https://yizhi2024.top/wp-content/uploads/2024/06/小众分类卡片.webp" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a target="_blank" href="https://yizhi2024.top/category/zhutimuban/"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143108249-23.png" src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143108249-23.png" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a target="_blank" href="https://fwq.meidecloud.com/"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143105106-20.png" src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143105106-20.png" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a target="_blank" href="https://mtjs.life/"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover ls-is-cached lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143106907-21.png" src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143106907-21.png" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div><div class="col-sm-1 col-xs-2"><a target="_blank" href="https://wlzq.top/"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 52%!important;"><img class="fit-cover ls-is-cached lazyloaded" data-src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143107239-22.png" src="https://yizhi2024.top/wp-content/uploads/2024/09/20240913143107239-22.png" alt="图片-学社山中人"><div class="absolute graphic-mask" style="opacity: 0.13;"></div></div></a></div></div></div></div>

先分析代码结构

• widget-graphic-cover mb10：这是一个包裹整个内容的容器
• row gutters-5：这是一个 row 容器，表示一个网格布局

电脑端：让元素自动填充剩余空间

CSS代码

.row {
    display: flex;
    flex-wrap: wrap;
}
.col-sm-1, .col-xs-2 {
    flex: 1 1 10%;
    max-width: 10%;
}

手机端，改为一行5个布局

CSS代码

@media (max-width: 768px) {
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .col-xs-2 {
        flex: 1 1 20%; /* 这里设置每个元素占20%的宽度 */
        max-width: 20%;
    }
}

添加位置

WP后台—zibll主题设置—全局功能—自定义CSS样式，复制粘贴这两段CSS代码即可