Kratos 主题内容的显示,col 的边框外面还有边框,这样会让显示内容以卡片的形式呈现,会比较模块化和美观化。但是在移动端,本来移动端屏幕显示就是窄,如果还是以这样的形式展现的话,两个边框会让显示内容更加狭小。

如上图所示,两边有太多空余的地方,在手机移动端显示的时候,如果我们去掉两边的 padding,应该会好很多。现在我们对主题进行修改。

如果对主题进行修改,我建议,应该把原主题以子主题的形式独立出来,对子主题进行修改这样不会影响你的修改点,也不会影响原主题的更新升级。关于如何制作子主题,修改子主题可以参看这里。但是如果你嫌麻烦,也可以直接在原主题上修改。修改样式表 style.css 文件。

/*屏幕宽度低于 768px,使其去掉 padding 开始*/
@media screen and (max-width: 768px) {
    .col-md-8 {
        padding-right: 0;
        padding-left: 0;
    }
}
/*屏幕宽度低于 768px,使其去掉 padding 结束*/

修改完毕保存上传的修改好的 style.css。我们再次刷新页面,看看效果。

看,这样是不是好了很多?对移动端的浏览友好了很多。对了,由于上面修改的代码添加了 @media screen and (max-width: 768px) 这样会有响应式处理,不会影响 PC 端的显示浏览。