col-xs , col-sm , col-md , col-lg是什么意思?什么时候用?
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> </div>
当屏幕尺寸
小于 768px 的时候,用 col-xs-12 类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
大于 1200px 的时候,用 col-lg-3 类对应的样式;
col-xs , col-sm , col-md , col-lg是什么意思?什么时候用?的更多相关文章
- iView栅格的使用
一般情况下栅格系统都会把每行row分为12列,但是iview是采用了24栅格系统,将区域进行24等分 基础用法 实例代码: <template> <Row> <Col s ...
- vue iviem UI grid布局
Grid 栅格 概述 我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题.使用栅格系统进行网页布局,可以使页面排版美观.舒适. 我们定义了两个概念,行row和列col,具体使用 ...
- [Bootstrap]全局样式(一)
页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...
- 深入新版BS4源码 探索flex和工程化sass奥秘
你可能已经听说了一个“大新闻”:Bootstrap4 合并了代号为#21389的PR,宣布放弃支持IE9,并默认使用flexbox弹性盒模型.这标志着:1)前端开发全面步入“现代浏览器”的时代进一步来 ...
- bootstrap3之栅格系统
原理 栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...
- 尝试实现bootstrap3网格系统
这是一篇搁置了很久的博文,个人实现的关键代码如下: // 这是用sass实现的,只是大致实现了网格系统和offset的功能 $size_list: ( xs: 0, sm: 576, md: 992, ...
- Element-ui-Basic
一.Layout 布局 1.基础布局 <el-row> <el-col :span="24"><div class="grid-conten ...
- Element-ui学习笔记1
1.col,row布局注意事项 el-row el-col gutter就是css,span的时候宽度是按boder-box来计算. 将 type 属性赋值为 'flex',可以启用 flex 布局, ...
- 使用Less/Sass生成Bootstrap格栅样式系统
熟悉Bootstrap的同学应该了解其中的格栅系统,用来排版非常方便.他将页面分为12等分,并且适用不同的尺寸屏幕.超小xs(小于768px),小屏sm(大于等于768px),中屏md(大于等于992 ...
- AdminLTE-2.2.0 学习
这货基于Bootstrap 3(提供了统一的样式,覆盖了默认的),所以官方建议先搞懂Bootstrap 3再说. # 布局 Layout 布局由四个主要部分组成: Wrapper (.wrapper) ...
随机推荐
- Eclipse 离线汉化的方法
本文感谢:http://jingyan.baidu.com/article/e75057f28401a8ebc91a899e.html 首先进入网址:http://www.eclipse.org/ba ...
- How to fix Error: listen EADDRINUSE while using nodejs
If I run a server with the port 80, and I try to use xmlHTTPrequest i get this error: Error: listen ...
- [leetcode]Subsets II @ Python
原题地址:https://oj.leetcode.com/problems/subsets-ii/ 题意: Given a collection of integers that might cont ...
- Android -- setWillNotDraw()
干货 处理onDraw()方法不被执行的解决方法: setWillNotDraw(false); 官方文档的解释: If this view doesn't do any drawing on its ...
- python 听课笔记(一)
- Java-JUC(六):创建线程的4种方式
Java创建线程的4种方式: Java使用Thread类代表线程,所有线程对象都必须是Thread类或者其子类的实例.Java可以用以下4种方式来创建线程: 1)继承Thread类创建线程: 2)实现 ...
- [React] Asynchronously Load webpack Bundles through Code-splitting and React Suspense
One approach to building high performance applications with webpack is to take advantage of code-spl ...
- 恶性循环中的永生bug,可以说是相当写实了
恶性循环中的永生bug,可以说是相当写实了
- SuperMap开发入门1——资源下载
前言(废话) 由于项目需要,我们将被改用超图(SuperMap)平台进行GIS开发.记忆中,我还是在学生时代使用过超图软件5.0版本,安装包只有50M,这也是超图与学校有合作关系的缘故. 在以后的学习 ...
- C/C++中的值传递,引用传递,指针传递,指针引用传递
在面试过程中,被面试官问到传值和传引用的区别,之前没有关注过这个问题,今天在网上找了一篇包含代码和图片的讲解文章,浅显易懂,遂转载备忘. 1. 值传递 void f( int p){ printf(& ...