众所周知,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中的查询构造器

    public function query(){ //新增数据 //$bool = DB::table('wd_user')->insert(['username'=>'jack']); ...

  2. Python3.6列表函数&方法

    函数: 1.len(list) 列表元素个数 2.max(list) 返回列表元素最大值 3.min(list) 返回列表元素最小值 4.list(seq) 将元组转换为列表 5.enumerate( ...

  3. LeetCode: 520 Detect Capital(easy)

    题目: Given a word, you need to judge whether the usage of capitals in it is right or not. We define t ...

  4. 详细讲解:零知识证明 之 zk-SNARK 开篇

    作者:林冠宏 / 指尖下的幽灵 博客:http://www.cnblogs.com/linguanh/ 掘金:https://juejin.im/user/587f0dfe128fe100570ce2 ...

  5. node-sass安装失败

    1. 直接安装报错(版本根据自己需求来) npm i node-sass@ -D 报错不能下载 win32-x64-64_binding.node Downloading binary from ht ...

  6. 浅谈C# String对象

    本文介绍C#中的string是一个引用类型,C# String对象是存放在堆上,而不是堆栈上的,因此,当把一个字符串变量赋给另一个字符串时,会得到对内存中同一个字符串的两个引用. AD:WOT2015 ...

  7. perl 操作文件指针

    之前使用perl 脚本写了一个读取文件的小工具,但是由于当时使用的Tie 的方式,在处理大文件时,效率并不十分理想,所以在网上搜索了perl 如何操作文件指针的文章,自己也学习一下,本博客就是学习过程 ...

  8. PJzhang: github与出口管制·说明条款

    猫宁!!! 参考链接:https://www.infoq.cn/article/KMl2EO*PSMxIkVREiYvC https://help.github.com/en/articles/git ...

  9. Python-7-字典方法

    clear 删除所有字典项 >>> d = {} >>> d['name'] = 'Gumby' >>> d['age'] = 42 >&g ...

  10. UWP 保存用户设置

    一:需求 需要保存用户设置,用户下一次再打开app时,加载默认的设置.比如用户设置的主题颜色,用户自定义的文件保存路径等. 一般应用的的数据存储分为两种,一种是云存储(将数据保存在云端,下次打开的时候 ...