2019独角兽企业重金招聘Python工程师标准>>>

前缀，layui在使用的过程一直没有boostrap的栅格功能，所有将下面的css引用就可以实现

layui的栅格功能

layui实现栅格功能的css样式

@charset "utf-8";
.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}
@media (min-width: 768px) {.container {width: 750px;}
}
@media (min-width: 992px) {.container {width: 970px;}
}
@media (min-width: 1200px) {.container {width: 1170px;}
}
.container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}
.row {margin-right: -15px;margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left;
}
.col-xs-12 {width: 100%;
}
.col-xs-11 {width: 91.66666667%;
}
.col-xs-10 {width: 83.33333333%;
}
.col-xs-9 {width: 75%;
}
.col-xs-8 {width: 66.66666667%;
}
.col-xs-7 {width: 58.33333333%;
}
.col-xs-6 {width: 50%;
}
.col-xs-5 {width: 41.66666667%;
}
.col-xs-4 {width: 33.33333333%;
}
.col-xs-3 {width: 25%;
}
.col-xs-2 {width: 16.66666667%;
}
.col-xs-1 {width: 8.33333333%;
}
.col-xs-pull-12 {right: 100%;
}
.col-xs-pull-11 {right: 91.66666667%;
}
.col-xs-pull-10 {right: 83.33333333%;
}
.col-xs-pull-9 {right: 75%;
}
.col-xs-pull-8 {right: 66.66666667%;
}
.col-xs-pull-7 {right: 58.33333333%;
}
.col-xs-pull-6 {right: 50%;
}
.col-xs-pull-5 {right: 41.66666667%;
}
.col-xs-pull-4 {right: 33.33333333%;
}
.col-xs-pull-3 {right: 25%;
}
.col-xs-pull-2 {right: 16.66666667%;
}
.col-xs-pull-1 {right: 8.33333333%;
}
.col-xs-pull-0 {right: auto;
}
.col-xs-push-12 {left: 100%;
}
.col-xs-push-11 {left: 91.66666667%;
}
.col-xs-push-10 {left: 83.33333333%;
}
.col-xs-push-9 {left: 75%;
}
.col-xs-push-8 {left: 66.66666667%;
}
.col-xs-push-7 {left: 58.33333333%;
}
.col-xs-push-6 {left: 50%;
}
.col-xs-push-5 {left: 41.66666667%;
}
.col-xs-push-4 {left: 33.33333333%;
}
.col-xs-push-3 {left: 25%;
}
.col-xs-push-2 {left: 16.66666667%;
}
.col-xs-push-1 {left: 8.33333333%;
}
.col-xs-push-0 {left: auto;
}
.col-xs-offset-12 {margin-left: 100%;
}
.col-xs-offset-11 {margin-left: 91.66666667%;
}
.col-xs-offset-10 {margin-left: 83.33333333%;
}
.col-xs-offset-9 {margin-left: 75%;
}
.col-xs-offset-8 {margin-left: 66.66666667%;
}
.col-xs-offset-7 {margin-left: 58.33333333%;
}
.col-xs-offset-6 {margin-left: 50%;
}
.col-xs-offset-5 {margin-left: 41.66666667%;
}
.col-xs-offset-4 {margin-left: 33.33333333%;
}
.col-xs-offset-3 {margin-left: 25%;
}
.col-xs-offset-2 {margin-left: 16.66666667%;
}
.col-xs-offset-1 {margin-left: 8.33333333%;
}
.col-xs-offset-0 {margin-left: 0;
}
@media (min-width: 768px) {.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: left;}.col-sm-12 {width: 100%;}.col-sm-11 {width: 91.66666667%;}.col-sm-10 {width: 83.33333333%;}.col-sm-9 {width: 75%;}.col-sm-8 {width: 66.66666667%;}.col-sm-7 {width: 58.33333333%;}.col-sm-6 {width: 50%;}.col-sm-5 {width: 41.66666667%;}.col-sm-4 {width: 33.33333333%;}.col-sm-3 {width: 25%;}.col-sm-2 {width: 16.66666667%;}.col-sm-1 {width: 8.33333333%;}.col-sm-pull-12 {right: 100%;}.col-sm-pull-11 {right: 91.66666667%;}.col-sm-pull-10 {right: 83.33333333%;}.col-sm-pull-9 {right: 75%;}.col-sm-pull-8 {right: 66.66666667%;}.col-sm-pull-7 {right: 58.33333333%;}.col-sm-pull-6 {right: 50%;}.col-sm-pull-5 {right: 41.66666667%;}.col-sm-pull-4 {right: 33.33333333%;}.col-sm-pull-3 {right: 25%;}.col-sm-pull-2 {right: 16.66666667%;}.col-sm-pull-1 {right: 8.33333333%;}.col-sm-pull-0 {right: auto;}.col-sm-push-12 {left: 100%;}.col-sm-push-11 {left: 91.66666667%;}.col-sm-push-10 {left: 83.33333333%;}.col-sm-push-9 {left: 75%;}.col-sm-push-8 {left: 66.66666667%;}.col-sm-push-7 {left: 58.33333333%;}.col-sm-push-6 {left: 50%;}.col-sm-push-5 {left: 41.66666667%;}.col-sm-push-4 {left: 33.33333333%;}.col-sm-push-3 {left: 25%;}.col-sm-push-2 {left: 16.66666667%;}.col-sm-push-1 {left: 8.33333333%;}.col-sm-push-0 {left: auto;}.col-sm-offset-12 {margin-left: 100%;}.col-sm-offset-11 {margin-left: 91.66666667%;}.col-sm-offset-10 {margin-left: 83.33333333%;}.col-sm-offset-9 {margin-left: 75%;}.col-sm-offset-8 {margin-left: 66.66666667%;}.col-sm-offset-7 {margin-left: 58.33333333%;}.col-sm-offset-6 {margin-left: 50%;}.col-sm-offset-5 {margin-left: 41.66666667%;}.col-sm-offset-4 {margin-left: 33.33333333%;}.col-sm-offset-3 {margin-left: 25%;}.col-sm-offset-2 {margin-left: 16.66666667%;}.col-sm-offset-1 {margin-left: 8.33333333%;}.col-sm-offset-0 {margin-left: 0;}
}
@media (min-width: 992px) {.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left;}.col-md-12 {width: 100%;}.col-md-11 {width: 91.66666667%;}.col-md-10 {width: 83.33333333%;}.col-md-9 {width: 75%;}.col-md-8 {width: 66.66666667%;}.col-md-7 {width: 58.33333333%;}.col-md-6 {width: 50%;}.col-md-5 {width: 41.66666667%;}.col-md-4 {width: 33.33333333%;}.col-md-3 {width: 25%;}.col-md-2 {width: 16.66666667%;}.col-md-1 {width: 8.33333333%;}.col-md-pull-12 {right: 100%;}.col-md-pull-11 {right: 91.66666667%;}.col-md-pull-10 {right: 83.33333333%;}.col-md-pull-9 {right: 75%;}.col-md-pull-8 {right: 66.66666667%;}.col-md-pull-7 {right: 58.33333333%;}.col-md-pull-6 {right: 50%;}.col-md-pull-5 {right: 41.66666667%;}.col-md-pull-4 {right: 33.33333333%;}.col-md-pull-3 {right: 25%;}.col-md-pull-2 {right: 16.66666667%;}.col-md-pull-1 {right: 8.33333333%;}.col-md-pull-0 {right: auto;}.col-md-push-12 {left: 100%;}.col-md-push-11 {left: 91.66666667%;}.col-md-push-10 {left: 83.33333333%;}.col-md-push-9 {left: 75%;}.col-md-push-8 {left: 66.66666667%;}.col-md-push-7 {left: 58.33333333%;}.col-md-push-6 {left: 50%;}.col-md-push-5 {left: 41.66666667%;}.col-md-push-4 {left: 33.33333333%;}.col-md-push-3 {left: 25%;}.col-md-push-2 {left: 16.66666667%;}.col-md-push-1 {left: 8.33333333%;}.col-md-push-0 {left: auto;}.col-md-offset-12 {margin-left: 100%;}.col-md-offset-11 {margin-left: 91.66666667%;}.col-md-offset-10 {margin-left: 83.33333333%;}.col-md-offset-9 {margin-left: 75%;}.col-md-offset-8 {margin-left: 66.66666667%;}.col-md-offset-7 {margin-left: 58.33333333%;}.col-md-offset-6 {margin-left: 50%;}.col-md-offset-5 {margin-left: 41.66666667%;}.col-md-offset-4 {margin-left: 33.33333333%;}.col-md-offset-3 {margin-left: 25%;}.col-md-offset-2 {margin-left: 16.66666667%;}.col-md-offset-1 {margin-left: 8.33333333%;}.col-md-offset-0 {margin-left: 0;}
}
@media (min-width: 1200px) {.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {float: left;}.col-lg-12 {width: 100%;}.col-lg-11 {width: 91.66666667%;}.col-lg-10 {width: 83.33333333%;}.col-lg-9 {width: 75%;}.col-lg-8 {width: 66.66666667%;}.col-lg-7 {width: 58.33333333%;}.col-lg-6 {width: 50%;}.col-lg-5 {width: 41.66666667%;}.col-lg-4 {width: 33.33333333%;}.col-lg-3 {width: 25%;}.col-lg-2 {width: 16.66666667%;}.col-lg-1 {width: 8.33333333%;}.col-lg-pull-12 {right: 100%;}.col-lg-pull-11 {right: 91.66666667%;}.col-lg-pull-10 {right: 83.33333333%;}.col-lg-pull-9 {right: 75%;}.col-lg-pull-8 {right: 66.66666667%;}.col-lg-pull-7 {right: 58.33333333%;}.col-lg-pull-6 {right: 50%;}.col-lg-pull-5 {right: 41.66666667%;}.col-lg-pull-4 {right: 33.33333333%;}.col-lg-pull-3 {right: 25%;}.col-lg-pull-2 {right: 16.66666667%;}.col-lg-pull-1 {right: 8.33333333%;}.col-lg-pull-0 {right: auto;}.col-lg-push-12 {left: 100%;}.col-lg-push-11 {left: 91.66666667%;}.col-lg-push-10 {left: 83.33333333%;}.col-lg-push-9 {left: 75%;}.col-lg-push-8 {left: 66.66666667%;}.col-lg-push-7 {left: 58.33333333%;}.col-lg-push-6 {left: 50%;}.col-lg-push-5 {left: 41.66666667%;}.col-lg-push-4 {left: 33.33333333%;}.col-lg-push-3 {left: 25%;}.col-lg-push-2 {left: 16.66666667%;}.col-lg-push-1 {left: 8.33333333%;}.col-lg-push-0 {left: auto;}.col-lg-offset-12 {margin-left: 100%;}.col-lg-offset-11 {margin-left: 91.66666667%;}.col-lg-offset-10 {margin-left: 83.33333333%;}.col-lg-offset-9 {margin-left: 75%;}.col-lg-offset-8 {margin-left: 66.66666667%;}.col-lg-offset-7 {margin-left: 58.33333333%;}.col-lg-offset-6 {margin-left: 50%;}.col-lg-offset-5 {margin-left: 41.66666667%;}.col-lg-offset-4 {margin-left: 33.33333333%;}.col-lg-offset-3 {margin-left: 25%;}.col-lg-offset-2 {margin-left: 16.66666667%;}.col-lg-offset-1 {margin-left: 8.33333333%;}.col-lg-offset-0 {margin-left: 0;}
}

转载于:https://my.oschina.net/yongxinke/blog/841424

前端那些事之layui篇---实现栅格功能相关推荐

  1. 前端那些事之Bootstrap篇

    2019独角兽企业重金招聘Python工程师标准>>> Bootstrap是什么? * Twitter 官方推出一套 css 的框架* 它能快速帮我们快速开发出一套风格绚丽的网站* ...

  2. 地图采集车的那些事 | 硬件质量篇

    1.背景及术语 地图采集车是一个较复杂的集成系统,理论上复杂度与可靠性具有一定负相关性.那么,如何提升可靠性,让这些常年累月干活的地图采集车多干活,少生病呢?本文将分享地图采集车造车人在硬件方面所做的 ...

  3. Vue React Angular之三国杀，web前端入坑第六篇 上

    「 懒癌引发血案 」 目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...

  4. 前端面试大全（序篇）

    面试系列 后续更新分类将同步更新系列目录: 前端面试大全(序篇):https://blog.csdn.net/cainiaoyihao_/article/details/116518423 前端面试大 ...

  5. 使用WebRTC搭建前端视频聊天室——信令篇

    转载自:使用WebRTC搭建前端视频聊天室--信令篇 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室--入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用 ...

  6. Vue、React、Angular之三国杀，web前端入坑第六篇(上)

    「 懒癌引发血案 」 目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...

  7. 前端面试大全（JavaScript篇——面试利器值得拥有！）

    目录 面试系列 内容介绍 1.介绍js的基本数据类型. 2.介绍js有哪些内置对象? 3.说几条写JavaScript的基本规范?, 4.JavaScript原型,原型链? 有什么特点? 一.关系 二 ...

  8. 使用WebRTC搭建前端视频聊天室——数据通道篇

    转自 使用WebRTC搭建前端视频聊天室--数据通道篇 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩 ...

  9. 使用WebRTC搭建前端视频聊天室——点对点通信篇

    转载自:使用WebRTC搭建前端视频聊天室--点对点通信篇 WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel--在浏览器之间建立一个点对点的 ...

最新文章

  1. Android异步消息处理机制
  2. JavaScript是如何同时做到单线程和异步执行的
  3. 如何在eclipse中修改jsp默认编码
  4. intel ssd toolbox 绿色单文件_你想要的大容量来了！影驰擎GA-E 16TB SSD上手：速度喜人-SSD,固态 ——快科技(驱动之家旗下媒体)-...
  5. python顺序结构代码_Python代码结构——顺序、分支、循环
  6. java中nodelist的用法_我可以在Java中使用for-each遍历一个NodeList吗？
  7. C语言基础教程之强制类型转换
  8. 18awg线材最大电流_USB4来了，最大的变化是这个
  9. c语言实训项目设计设计游戏,C语言实训三贪吃蛇游戏设计.doc
  10. Yahoo 股票数据抓取
  11. 初入steam避坑请进
  12. HCIP-三层网络架构实验
  13. 最长公共子序列(LCS) 过程图解
  14. 主仆渡河问题 ----python
  15. 电脑端微信文件的存储位置在哪？
  16. Java经典300例-基础篇-004：整数类型最大值
  17. 低频矢量网络分析仪（VNA）的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
  18. 分类器的不同的性能评价指标
  19. html的视频字幕制作步骤,视频滚动字幕怎么制作（上）
  20. 先验 超验_什么是“先验”？什么是“超验”？二者如何区分？

热门文章

  1. 《游戏引擎架构》笔记十四
  2. 关机相关(shutdown,reboot)
  3. oracle10g库连接报错
  4. 针对Oracle的10G版本提升SCOTT为DBA脚本!
  5. unused function warning message（转）
  6. 还珠格格里的尔泰，重现娱乐圈
  7. H3C交换机引发的奇葩故障
  8. angular5 ng-content使用方法
  9. python3 进程
  10. [CareerCup] 16.5 Semphore 信号旗