关于bootstrap栅格系统的五等分以及八等分代码
众所周知,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栅格系统的五等分以及八等分代码的更多相关文章
- 第二百三十五节,Bootstrap栅格系统
Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
- Bootstrap栅格系统基本使用
1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...
- Bootstrap 栅格系统初识
以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...
随机推荐
- 利用jstack定位典型性能问题实例
此文已由作者朱笑天授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 问题的起因是笔者在一轮性能测试的中,发现某协议的响应时间很长,去观察哨兵监控里的javamethod监控可以 ...
- vc编程中出现 fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "stdafx.h"”?
解决办法菜单--〉项目--〉设置,出现“项目设置”对话框,左边展开项目,在“源文件”中找到出错的文件,然后在右边选择“C/C++”属性 页,在Category下拉框中选择“Precompiled He ...
- lightoj 1422【区间DP·分类区间首元素的情况】
题意: 给你n天分别要穿的衣服种类,可以套着穿, 一旦脱下来就不能再穿,求n天至少要几件. 思路: 区间DP dp[i][j]代表i到j需要至少几件衣服 第i天的衣服在第i天穿上了,dp[i][j]= ...
- CodeForces 363D 【二分+贪心】
思路: 一开始是没有办法贪心的,但是答案是可以二分的,因为窝能买k辆车的话,窝就一定能买k-1辆车:而且我最好就是拿手上钱较多的那些人去买价格便宜的车,这样肯定是能买到最多的车,而且花的少,因为对于要 ...
- ADT版本查看,This Android SDK requires Andr...ate ADT to the latest问题
ADT版本查看 Help->About ADT This Android SDK requires Andr...ate ADT to the latest问题 这样的问题很好解决,一个升级AD ...
- Ogre 简易角色Demo
参考Sample中的角色类,使用ExampleApplication.h改写,只编译了release,debug在配置文件名字上有不同 遗留一个问题 mBodyEnt->getSkeleton( ...
- IT兄弟连 JavaWeb教程 JSP内置对象2
application对象 application对象用于保存所有应用程序中的公有数据.它在服务器启动时自动创建,在服务器关闭时销毁,当application对象没有被销毁时,所有用户都可以共享app ...
- assembly x86(nasm)画三角形等图形的实现
参考了一位大佬的博客 https://blog.csdn.net/qq_40298054/article/details/84496944传送门 https://blog.csdn.net/qq_40 ...
- react native 获取地图需要的SHA1
1.从电脑的根目录进入.android文件 2.进入.android文件后输入 keytool -v -list -keystore debug.keystore 3.回车输入密码,(可以直接回车不用 ...
- 5 天 4000 star 的一个爆款开源项目
今天早上起来浏览 GitHub 的时候,在周热门趋势排行榜上看到了这么一个开源项目,仅仅 5 天时间,爬到了周排行榜的第一名的位置.而在每天的排行榜上,今天一早也高高位居排行榜的第二位. 这个开源项目 ...