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) ...
随机推荐
- 反恐24小时第一季/全集24 Live Another Day迅雷下载
反恐24小时 第一至九季 24 Season 1-9 (2001-2014) 本季看点:<24小时>第8季将在拥有美国的象征自由女神像的纽约开始,在新的一天,CTU重新开张,新的领导为从M ...
- C# 关键字Event
1>>> 在委托实例前,不加event,那这个委托就是一个普通的委托,我们可以用别的函数调用,也可以直接用对象调用,但加上关键字之后,只能用成员函数调用 public delegat ...
- JAVAWEB开发之HttpServletResponse和HttpServletRequest详解(下)(各种乱码、验证码、重定向和转发)
HttpServletRequest获取请求头信息 (1)获取客户机请求头 String getHeader(String name) Enumeration<String> getHe ...
- Linux 批量查找替换方法(VIM和sed)
版权声明:欢迎与我交流讨论,若要转载请注明出处~ https://blog.csdn.net/sinat_36053757/article/details/70946263 1.VIM命令 当前行进行 ...
- asp.net 判断用户是否使用微信浏览器
平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就提示用户请到微信上访问该网页.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览 ...
- emouse思·睿—评论与观点整理之二
虽说我主要做的硬件,平时的兴趣爱好比较关注移动互联网,混迹于虎嗅.爱范儿.雷锋网.36Kr.cnBeta.瘾科技.i黑马.TechWeb等这类科技以及创业媒体,遗憾的是系统的去写的并不多,好在还算充分 ...
- scrapy框架系列 (4) Scrapy Shell
Scrapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据 ...
- log4net修改数据库连接字符串和写自定义信息
最近项目需要用log4net来写日志,因为整个平台式在sharepoint上,我们需要记录具体是哪个子站点发生的日志,因此需要再原来的log表里面添加一个自定义信息列.由于平台的安全性要求,我们需要对 ...
- Android -- java代码设置margin
我们平常可以直接在xml里设置margin,如: <ImageView android:layout_margin="5dip" android:src="@dra ...
- BiLSTM-CRF模型中CRF层的解读
转自: https://createmomo.github.io/ BiLSTM-CRF模型中CRF层的解读: 文章链接: 标题:CRF Layer on the Top of BiLSTM - 1 ...