根据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. sharepoint 2013 自定义列表eventhandle权限控制

    记录一下如何在sharepoint server 2013自定义列表中,使用eventhandle控制自定义列表custom list的条目item权限. ///<summary> /// ...

  2. Google安全团队对Android安全的认识

    http://commondatastorage.googleapis.com/io2012/presentations/live%20to%20website/107.pdf 看看google的攻城 ...

  3. 【Zookeeper】源码分析之持久化--FileSnap

    一.前言 前篇博文已经分析了FileTxnLog的源码,现在接着分析持久化中的FileSnap,其主要提供了快照相应的接口. 二.SnapShot源码分析 SnapShot是FileTxnLog的父类 ...

  4. office全系列激活脚本-改良版

    @ECHO OFFTITLE office 全版本系统激活@echo offfor /l %%a in (8,1,16) do (for /f "tokens=*" %%i in ...

  5. Asp.Net 网站访问人数及在线人数

    利用Application对象和Session对象可以统计历史访问人数和当前在线人数. 在会话开始和结束时,一定要进行加锁和解锁操作.由于多个用户可以共享Application对象,因此加锁是必要的, ...

  6. USACO 3.3 A Game

    A GameIOI'96 - Day 1 Consider the following two-player game played with a sequence of N positive int ...

  7. Spark-GraphxAPI学习笔记

    图的集合视图 graph包含三个基本的类集合视图: val vertices: VertexRDD[VD] val edges: EdgeRDD[ED] val triplets: RDD[EdgeT ...

  8. MATLAB符号极限、导数及级数求和

    作者:长沙理工大学 交通运输工程学院 王航臣 1.函数的极限 函数:limit 功能:求取函数的极限 语法: limit(f) limit(f,x,a) limit(f,x,a,'right') li ...

  9. java 执行redis的部分方法

    @Autowired private RedisTemplate<String, Object> redisTemplate; public void setRedisTemplate(R ...

  10. ios版本更新总结

    更新思路,获取APP Store 版本号与项目本地版本号对比,如果本地低于商店版本号,就提示用户更新(说明:在上架项目时请保持本地和商店版本号一致,避免检测更新问题被拒) 1.获取商店版本号,代码如下 ...