众所周知,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. CCF 201509-3 模板生成系统 (STL+模拟)

    问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的基本结构是相同的.例如,对于展示用户信息的页面,当用户为 Tom 时,网页的源代码是 而当用户为 Jerr ...

  2. AttributeCollection.Add(String, String) Method

    <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  3. ASP.NET Core Web API + Angular 仿B站(三)后台配置 JWT 的基于 token 的验证

    前言: 本系列文章主要为对所学 Angular 框架的一次微小的实践,对 b站页面作简单的模仿. 本系列文章主要参考资料: 微软文档: https://docs.microsoft.com/zh-cn ...

  4. E20180715-hm

    grapefruit n. 葡萄柚,西柚; 葡萄柚树;

  5. now code——处女座的期末复习

    题目描述 快要期末考试了,处女座现在有n门课程需要考试,每一门课程需要花ai小时进行复习,考试的起始时间为bi,处女座为了考试可以不吃饭不睡觉,处女座想知道他能否复习完所有的科目(即在每一门考试之前复 ...

  6. 《ERP真的免费不花钱·企业自主实施OdooERP》试读:第十章-仓库条码操作案例

    文/开源智造联合创始人老杨 本文来自<企业自主实施OdooERP>的试读章节.书籍尚未出版,请勿转载.欢迎您反馈阅读意见. 案例背景 各位读者同学,本案例假定读者已经完成了进销存案例练习. ...

  7. ISCC 2018线上赛 writeup

    今天有机会去ISCC2018参加了比赛,个人的感受是比赛题目整体难度不高,就是脑洞特别大,flag形式不明确,拿到flag后也要猜测flag格式,贼坑 废话不多说,以下是本人的解题思路 MISC 0x ...

  8. C# 委托之把委托从委托链(多播委托)移除

    运用“-”运算符将委托从委托链移除 class HelloWorld { //定义委托类型 delegate void DelegationChain(); static void Main(stri ...

  9. java如果去除中间空格,就不能用trim()这个方法了

    public class Hello { public static void main(String[] args){ String text = "12v 4 6 5 55"; ...

  10. The Weakest Sith

    http://codeforces.com/gym/101149/problem/F 题目要输出最丑陋的衣服.所以每件衣服都要和其他衣服比一次. 但是注意到,能赢一件衣服的衣服,就算是好衣服了. 那么 ...