layui栅格如何实现5等分,一行5列
taotaoit Layui 2019-07-05 6381 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

7440782 2655 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

layui栅格如何实现5等分,一行5列?

layui 栅格系统是12格的
不能实现5等分,可以自己仿照layui定义css样式

打开laui css查看源码
发现一等分是8.3%   layui是12格的;
所以 实现五等分 12/5*8.3% 就是19.9999992%

5等分,12格,大概每列占比是12/5=2.4,所以我们命名为
.layui-col-lg2dot4,.layui-col-md2dot4,.layui-col-sm2dot4,.layui-col-xs2dot4
css样式代码:

.layui-col-lg2dot4,.layui-col-md2dot4,.layui-col-sm2dot4,.layui-col-xs2dot4{position:relative;display:block;box-sizing:border-box}
.layui-col-xs2dot4{float:left}
.layui-col-xs2dot4{width:19.9999992%}
.layui-col-xs-offset2dot4{margin-left:19.9999992%}
@media screen and (min-width:768px){
	.layui-col-sm2dot4{float:left}
	.layui-col-sm2dot4{width:19.9999992%}
	.layui-col-sm-offset2dot4{margin-left:19.9999992%}
}
@media screen and (min-width:992px){
	.layui-col-md2dot4{float:left}
	.layui-col-md2dot4{width:19.9999992%}
	.layui-col-md-offset2dot4{margin-left:19.9999992%}
}
@media screen and (min-width:1200px){
	.layui-col-lg2dot4{float:left}
	.layui-col-lg2dot4{width:19.9999992%}
	.layui-col-lg-offset2dot4{margin-left:19.9999992%}
}

5等分占4份

.layui-col-lg9dot6,.layui-col-md9dot6,.layui-col-sm9dot6,.layui-col-xs9dot6{position:relative;display:block;box-sizing:border-box}
.layui-col-xs9dot6{float:left}
.layui-col-xs9dot6{width:79.9999968%}
.layui-col-xs-offset9dot6{margin-left:79.9999968%}
@media screen and (min-width:768px){
    .layui-col-sm9dot6{float:left}
    .layui-col-sm9dot6{width:79.9999968%}
    .layui-col-sm-offset9dot6{margin-left:79.9999968%}
}
@media screen and (min-width:992px){
    .layui-col-md9dot6{float:left}
    .layui-col-md9dot6{width:79.9999968%}
    .layui-col-md-offset9dot6{margin-left:79.9999968%}
}
@media screen and (min-width:1200px){
    .layui-col-lg9dot6{float:left}
    .layui-col-lg9dot6{width:79.9999968%}
    .layui-col-lg-offset9dot6{margin-left:79.9999968%}
}

版权声明:本站原创文章,允许自由转载。

相关推荐
layui垂直导航,鼠标经过去掉左侧的青色条块
Layui | 2019-07-05 9208
打开layui.css找到 .layui-nav-tree .layui-nav-bar{width:5px;height:0;background-color:#009688} 将width:5px改为width:0就可以了
layui竖版tab选项卡
Layui | 2019-07-05 5712
效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
评论:0条
评论加载中...
发表评论