根据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. WPF 自定义数字文本框:NumericBox

    由于项目需要,最近写了一个数字输入文本框,在此作个备忘. 1.代码调用 <controls:NumericBox Height="32" Width="80&quo ...

  2. java String源码学习

    public final class String implements java.io.Serializable, Comparable<String>, CharSequence { ...

  3. mybatis 入门进阶之 pojo

    有时候我们dao方法声明的入参需要是自定义的pojo,以满足复杂的查询条件. IWebUserCustomDao.java package com.mozi.dao; import java.util ...

  4. HTML <form> 标签的 enctype 属性

    HTML <form> 标签 定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www- ...

  5. jvm内存增长问题排查

    jvm内存增长问题排查 排查个jvm 内存占用持续增加的问题,纪录一下,引以为戒. 运维发现应用jvm内存占用在发布后回落,然后持续增高,,dump后分析一下: 占内存的大部分是这种名字相似的bean ...

  6. CSS倒影

    前面的话   CSS倒影目前只有chrome和safari浏览器支持,且需要添加-webkit-前缀.本文将详细介绍CSS倒影box-reflect 语法 -webkit-box-reflect 初始 ...

  7. 【CSS学习笔记】CSS初始化

    腾讯QQ官网(http://www.qq.com)样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input ...

  8. openstack-kilo--issue(十二)openstack-keystone和httpd服务同时占用35357和5000

    == Keystone service == openstack-keystone: inactive 如上面显示的状态:如果启动了httpd就不能很好的启动openstack-keystone服务, ...

  9. 【SQL】T-SQL基本语法复习

    数据库基本的几个对象 数据表.视图.存储过程.索引.触发器.函数 增删改查 Insert into test(name,sex,ago) values ('陈三','男',20) Update tes ...

  10. 百度的hao123.com篡改浏览器首页,解决办法

    快捷方式右键找到chrome.exe, 把chorme.exe修改成别的名字例如 chromeFuckHao123.exe 就OK了. hao123是用病毒的形式查找chrome.exe然后进程注入的 ...