众所周知,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. Laravel中的路由管理

    //路由中输出视图Route::get('/', function () { return view('welcome');}); //get路由请求Route::get('get',function ...

  2. zepto+mui开发中的tap事件重复执行

    zepto.js和mui一起使用的时候,因为都有tap事件绑定tab事件后会多次触发还会报错,这时不引用zepto中的touch.js就可以了,只用mui的tap相关事件. $(function () ...

  3. 慕课笔记-Java入门第三季

    1.自定义异常 自定义异常必须继承Exception类或者其子类. 2.字符串 String对象创建后则不能被修改,是不可变的,所谓的修改其实是创建了新的对象. 多次创建的字符常量,Java编译程序只 ...

  4. iOS 7:漫谈#define 宏定义(转)

    iOS :漫谈#define 宏定义 #define宏定义在C系开发中可以说占有举足轻重的作用.底层框架自不必说,为了编译优化和方便,以及跨平台能力,宏被大量使用,可以说底层开发离开define将寸步 ...

  5. ZooKeeper应用案例

    我们通过学习借鉴,哪些项目或应用都使用了ZooKeeper,可以了解我们的应用使用ZooKeeper是否能真正地带来价值,当然,有些项目可能也未必非常适合使用ZooKeeper,我们要批判地学习.借鉴 ...

  6. URI URN URL的RFC参考文档

  7. JVM加载类的原理机制

    在Java中,类装载器把一个类装入Java虚拟机中,要经过三个步骤来完成:装载.链接和初始化,其中链接又可以分成校验.准备.解析装载:查找和导入类或接口的二进制数据: 链接:执行下面的校验.准备和解析 ...

  8. python 基础(九) 文件操作

    文件操作 一.函数: f = open(’文件名','打开方式'[,encoding='字符编码']) open 打开的方式 字符 说明 r 只读的方式打开 rb 以二进制的形式打开文件 只读 r+ ...

  9. Hive_Hive的数据模型_数据存储

    Hive的数据模型_数据存储 web管理工具察看HDFS文件系统:http://<IP>:50070/ 基于HDFS没有专门的数据存储格式,默认使用制表符存储结构主要包括:数据库,文件,表 ...

  10. eclipse打开jsp的方式怎么设置成默认

    https://jingyan.baidu.com/article/4ae03de34137be3eff9e6b93.html