众所周知,bootstrap的栅格系统是基于十二等分的,今天拿到设计的设计稿一看,发现一个图片list上只有8张图片,然后上网查资料,发现只能自己写css代码实现,故写博客记录代码。

以下是八等分的代码

<style type="text/css">
.col-xs-1-8,
.col-sm-1-8,
.col-md-1-8,
.col-lg-1-8{
position: relative;
min-height: 1px;
margin-right: 10px;
margin-left: 10px;
} .col-xs-1-8{
width:12.5%;
float:left;
} @media (min-width:768px){
.col-sm-1-8{
width: 12.5%;
float: left;
}
} @media (min-width:992px){
.col-md-1-8{
width: 12.5%;
float: left;
}
} @media (min-width:1200px){
.col-lg-1-8{
width: 12.5%;
float:left;
}
}
</style>

5等分代码同理

<style type="text/css">
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
position: relative;
min-height: 1px;
margin-right: 10px;
margin-left: 10px; } .col-xs-1-5 {
width: 18%;
float: left;
} @media (min-width: 768px) {
.col-sm-1-5 {
width: 18%;
float: left;
}
} @media (min-width: 992px) {
.col-md-1-5 {
width: 18%;
float: left;
}
} @media (min-width: 1200px) {
.col-lg-1-5 {
width: 18%;
float: left;
}
}
</style>

关于bootstrap栅格系统的五等分以及八等分代码的更多相关文章

  1. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

  2. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  3. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  4. Bootstrap栅格系统(布局)

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  5. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  7. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  8. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  9. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

随机推荐

  1. 16-CoreData之多表关联(存储自定义数据模型)

    多表关联 1.1-简介 什么是多表关联 在处理数据库的关系中,无非只有三种关系 一对一:一个老师只能在一个教室上课,不可能同时在两个教室上课 一对多:一个教室可以有多个学生,但一个学生只能在一个教室 ...

  2. opencv3.1 压缩并拼图

    必须有重叠才能拼,压缩越多,拼接越快 #include <opencv2\opencv.hpp> #include <opencv2\stitching.hpp> using ...

  3. C 语言实例 - 复数相加

    C 语言实例 - 复数相加 C 语言实例 C 语言实例 使用结构体(struct)将两个复数相加. 我们把形如 a+bi(a,b均为实数)的数称为复数,其中 a 称为实部,b 称为虚部,i 称为虚数单 ...

  4. MyBatis逆向工程代码的生成以及使用详解(持续更新)

    逆向工程简介什么是逆向工程:        mybatis需要程序员自己编写sql语句,mybatis官方提供逆向工程,可以针对单表自动生成mybatis执行所需要的代码(mapper.java.ma ...

  5. 一个致命的 Redis 命令,导致公司损失 400 万

    什么样的 Redis 命令会有如此威力,造成如此大的损失? 具体消息如下: 看完这个消息后,我心又一惊,为什么这么低级的问题还在犯?为什么线上的危险命令没有被禁用?这事件报道出来真是觉得很低级... ...

  6. 虚拟机无法分配内存 virtual memory exhausted: Cannot allocate memory

    1.内存交换空间(swap)的构建 安装Linux时一定需要的两个分区:根目录和swap(内存交换空间). swap的功能:在应付物理内存不足的情况下所造成的内存扩展记录的功能. 物理内存不足的时候, ...

  7. jq解析json文件

    $.ajaxSettings.async = false;//同步还是异步 $.getJSON(URL,function(data){ //成功后执行 })

  8. python入门之正则表达式

    正则 通过re模块实现 eg:>>>import re        >>>re.findall('abc',str_name) 在strname里面完全匹配字符串 ...

  9. 寻找最美的你(select)

    Time Limit:2000ms   Memory Limit:128MB 题目描述 这个问题是这样的,如果一个区间[L,R]存在一个数ai,使得这个数是这个区间所有数的约数,那么[L,R]这段区间 ...

  10. javaScript面向对像

    1.创建对象 <script type="text/javascript"> function Flower(name,addre) { this.name=name; ...