.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是什么意思?什么时候用?的更多相关文章

  1. iView栅格的使用

    一般情况下栅格系统都会把每行row分为12列,但是iview是采用了24栅格系统,将区域进行24等分 基础用法 实例代码: <template> <Row> <Col s ...

  2. vue iviem UI grid布局

    Grid 栅格 概述 我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题.使用栅格系统进行网页布局,可以使页面排版美观.舒适. 我们定义了两个概念,行row和列col,具体使用 ...

  3. [Bootstrap]全局样式(一)

    页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...

  4. 深入新版BS4源码 探索flex和工程化sass奥秘

    你可能已经听说了一个“大新闻”:Bootstrap4 合并了代号为#21389的PR,宣布放弃支持IE9,并默认使用flexbox弹性盒模型.这标志着:1)前端开发全面步入“现代浏览器”的时代进一步来 ...

  5. bootstrap3之栅格系统

    原理 栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...

  6. 尝试实现bootstrap3网格系统

    这是一篇搁置了很久的博文,个人实现的关键代码如下: // 这是用sass实现的,只是大致实现了网格系统和offset的功能 $size_list: ( xs: 0, sm: 576, md: 992, ...

  7. Element-ui-Basic

    一.Layout 布局 1.基础布局 <el-row> <el-col :span="24"><div class="grid-conten ...

  8. Element-ui学习笔记1

    1.col,row布局注意事项 el-row el-col gutter就是css,span的时候宽度是按boder-box来计算. 将 type 属性赋值为 'flex',可以启用 flex 布局, ...

  9. 使用Less/Sass生成Bootstrap格栅样式系统

    熟悉Bootstrap的同学应该了解其中的格栅系统,用来排版非常方便.他将页面分为12等分,并且适用不同的尺寸屏幕.超小xs(小于768px),小屏sm(大于等于768px),中屏md(大于等于992 ...

  10. AdminLTE-2.2.0 学习

    这货基于Bootstrap 3(提供了统一的样式,覆盖了默认的),所以官方建议先搞懂Bootstrap 3再说. # 布局 Layout 布局由四个主要部分组成: Wrapper (.wrapper) ...

随机推荐

  1. idea jni

    javah -jni -classpath (搜寻类目录) -d (输出目录) (类名) nm -D  **.so idea setting $JDKPath$/bin/javah -jni -cla ...

  2. 用开源项目PhotoView实现图片的双指缩放和双击放大缩小

    项目地址:https://github.com/chrisbanes/PhotoView 用开源项目有个好处,一是实现简单,二是bug少.那么我们就来说下这个项目能够实现的效果: 1.单个图片的双指缩 ...

  3. WinForm 自动完成控件实例代码简析

    在Web的应用方面有js的插件实现自动完成(或叫智能提示)功能,但在WinForm窗体应用方面就没那么好了. TextBox控件本身是提供了一个自动提示功能,只要用上这三个属性: AutoComple ...

  4. protobuf 嵌套示例

    1.嵌套 Message message Person { required string name = 1; required int32 id = 2;        // Unique ID n ...

  5. django错误:Connection reset by peer

    django使用自身的web服务器时,处理并发的能力很弱,如果客户端并发连接数超过了其承载量,服务器会将其中一些连接关闭,从而导致这个问题 https://blog.csdn.net/xc_zhou/ ...

  6. windows核心编程-互斥器(Mutexes)

    线程同步的方式主要有:临界区.互斥区.事件.信号量四种方式. 前边讲过了临界区线程同步-----windows核心编程-关键段(临界区)线程同步,这章我来介绍一下互斥器(Mutexes)在线程同步中的 ...

  7. 里诺全系列注册机+暗桩patch

    一直有坛友私信更新里诺,今天花了一天时间,将里诺全系列更新完毕,权当送给坛友们的新年礼物吧! 全系列开放至元旦假期结束,后面就随机开放了. <ignore_js_op> 使用说明: 1.选 ...

  8. 解决 win7 注册com组件失败问题

    解决 win7 注册com组件失败问题 运行:regsvr32 xxx.ocx 提示:模块 "xxx.ocx" 已加载,但对调用 dllregisterserver 的调用失败,错 ...

  9. ESXI部署OVF模板提示用户已取消操作处理方法

    ESXI导出OVF部署到新的ESXI服务器上,Linux主机没有出现用户已取消操作的提示,部署WINDOW虚拟机的时候,提示用户已取消操作,如图: ​首先,要先了解为什么会出现这个问题,原因在于,在做 ...

  10. [Canvas]游戏增加怪物爆炸效果,改善箭头形状

    请点此下载代码并用浏览器打开试玩. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-eq ...