根据bootstrap源码改的1比5的栅格系统

/*5等分媒体查询样式begin*/
.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5,.col-xs-4-5,.col-sm-4-5,.col-md-4-5,.col-lg-4-5 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-1-5 {
width: 20%;
float: left;
}
.col-xs-4-5 {
width: 80%;
float: left;
}
@media (min-width: 768px) {
.col-sm-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 768px) {
.col-sm-4-5 {
width: 80%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-4-5 {
width: 80%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-4-5 {
width: 80%;
float: left;
}
}
/*5等分媒体查询样式end*/

  

 
 

bootstrap如何自定义5等分的更多相关文章

  1. Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  2. Django:bootstrap table自定义查询实现

    参考:https://jalena.bcsytv.com/archives/tag/bootstrap 背景: bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一, ...

  3. bootstrap如何自定义5列

    废话少说,先上代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> < ...

  4. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  5. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  6. Flex布局和Bootstrap布局两者的比较

    在Bootstrap中采用12栅格的布局,12份随意分配,但是不能解决5等分,7等分的问题.所以flex布局来协助. bootstrap的布局方式 <div class="row&qu ...

  7. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  8. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  9. 《深入理解bootstrap》读书笔记:第一章 入门准备

    一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...

随机推荐

  1. [置顶] (游戏编程-04)JAVA版雷电(奇迹冬瓜)

    注:运行环境必须要JDK 先为大家送上游戏截图 接着在最后有代码下载的链接地址 1.游戏开始动画和主界面 关卡与boss 结束画面 代码下载地址 点击打开链接

  2. 行业介绍:车载DVD MID 导航用料一般包含国腾LVDS芯片GM8284C/GM8283

    车载DVD MID 导航用料一般包含国腾LVDS芯片 GM8284C/GM8283/替代SN75LVDS83,THC63LVDM83C , 音频ES7144/CS4344,  龙讯MHL HDMI芯片 ...

  3. Linux 内核源码中likely()和unlikely()

    ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首先明确: if (likely(value))等价于if (value)if (likely( ...

  4. [APUE]进程控制(中)

    一.wait和waitpid函数 当一个进程正常或异常终止时会向父进程发送SIGCHLD信号.对于这种信号系统默认会忽略.调用wait/waidpid的进程可能会: 阻塞(如果其子进程都还在运行); ...

  5. Myeclipse 2016 CI 6 破解

    Myeclipse 2016 CI 6 破解 2016-10-11 分类:Javaweb后台 / JSP / 首页 阅读(1633) 评论(16)  之前写了myeclipse 2015 stable ...

  6. 【翻译】在Mac上使用VSCode创建你的第一个Asp.Net Core应用

    Setting Up Your Development Environment 设置你的开发环境 To setup your development machine download and inst ...

  7. Zookeeper 安装和配置

    单机模式 下载zookeeper的安装包之后, 解压到合适目录. 进入zookeeper目录下的conf子目录, 创建zoo.cfg: tickTime=2000 dataDir=/Users/app ...

  8. linux面试题集锦2《转》

    一.填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 索引节点来 ...

  9. python简易爬虫实现

    目的:爬取昵称 目标网站:糗事百科 依赖的库文件:request.sys.beautifulSoup4.imp.io Python使用版本:3.4 说明:参考http://cn.python-requ ...

  10. release management客户端无法连接到release management server的问题解决

    参考:http://myalmblog.com/2014/03/error-installing-release-management-client/ 装了服务器,装客户端.然后客户端连不上服务器. ...