众所周知,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. UVa 10213 How Many Pieces of Land ? (计算几何+大数)

    题意:一块圆形土地,在圆周上选n个点,然后两两连线,问把这块土地分成多少块? 析:这个题用的是欧拉公式,在平面图中,V-E+F=2,其中V是顶点数,E是边数,F是面数.对于这个题只要计算V和E就好. ...

  2. 在实战中使用nginx-rtmp遇到的TCP连接问题分析

    在实战中使用nginx-rtmp遇到的TCP连接问题分析 背景 前段时间公司做了一次体育赛事的现场直播,网络由某通信公司负责搭建,主要测试5G CPE上行网络的带宽和稳定性,为了做到万无一失,他们同时 ...

  3. 洛谷 - P2051 - 中国象棋 - 简单dp

    https://www.luogu.org/problemnew/show/P2051 一点都不简单的简单dp. 还是从旧行转移到新行,而不是考虑新行从哪些旧行转移吧. #include<bit ...

  4. Unresolved function or method require()

    1. 这是在JavaScript配置中没有node.js,去设置中配置就行了,方法如下: setting -> Languages&Frameworks -> Javascript ...

  5. CF438E The Child and Binary Tree(生成函数+多项式开根+多项式求逆)

    传送门 可以……这很多项式开根模板……而且也完全不知道大佬们怎么把这题的式子推出来的…… 首先,这题需要多项式开根和多项式求逆.多项式求逆看这里->这里,这里讲一讲多项式开根 多项式开方:已知多 ...

  6. 怎么解决UIScrollView把uitableviewcell的点击事件屏蔽了

    [self.contentView addSubview:self.scrollView]; self.scrollView.userInteractionEnabled = NO; [self.co ...

  7. 初次接触Service笔记

    Service是后台的运行的小程序,分两种一种是StarService()另外一种是bindService(),这种可调用Service中的方法和返回结果等操作而StarService不能 他的生命周 ...

  8. Libre OJ P2332「JOI 2017 Final」焚风现象【差分思想】By cellur925

    题目传送门 这道题开始看起来会很晕...\(qwq\).首先我们要明确题目中的海拔&&温度.温度是受海拔影响的,每次改变的是海拔,我们求的是温度. 我们开始读入的时候便可以处理出开始\ ...

  9. MyBatist庖丁解牛(五)

    很多时候我们在自己的每个service中没有中注入SqlSessionTemplate; 但是我们直接调用mapper接口方法就直接能够操作数据库 这个是为什么??下面开始解惑: Mybatis Sq ...

  10. Java 时区(转)

    http://blog.csdn.net/wangpeng047/article/details/8560690