效果展示:
将下面的代码(删掉<style>和</style>)放到主题/子主题的自定义css里,如果不生效就放到header.php和footer.php里(保留<style>和</style>)
此内容来自chatGPT,有没有问题请自行测试
卡片一行显示6个效果:
使用方法同上,该内容来自@小鱼社长的分享,在此感谢~
代码:
其他CSS样式版本
1.
/*首页主内容卡片*/
.posts-item.card {
width: calc(20% - 16px);
display: inline-block;
margin: 8px;
padding: 10px;
vertical-align: top;
transition: .3s;
}
放到额外css中,效果做到了,pc一行显示五个卡片!但是!手机上也是一行五个了!
2.
3.
@media (min-width: 992px){
.fluid-widget .card, .site-layout-1 .card {
width: calc(20% - 16px);
}
}
4.
@media screen and (min-width: 800px) {
.posts-item .card{
width:calc(24.333% – 62px);
}
}
以上都是修改子比主题卡片模式下一行显示的卡片数量的代码,请大家测试看看哪个可用,请在评论区告诉我们吧
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
- 最新
- 最热
只看作者