.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. libjpeg的问题

    游戏项目是基于cocos2d-x开发的,但线上发现一个bug就是玩家在设置完自定义头像后直接闪退.凡是在设置该玩家头像的地方,游戏就直接闪退.最终定位到的问题是图片数据源有问题,我的机器是win7,图 ...

  2. LaTeX技巧22:LaTeX文档中的参考文献初级

    用 LaTeX 处理文档, 经常就要书写参考文献, 本篇就是介绍如何在 LaTeX 中使用参考文献, 注意这里讲的是LaTeX默认的 thebibliography 环境, 如果要了解 LaTeX 中 ...

  3. Windows Server 2012上安装.NET Framework 3.5(不需要安装光盘)

    因为在windows2012里,安装数据库,IIS部分组件都需要.NET3.5,而默认windows2012安装时,并不会把此组件复制到电脑里 导致,后期要安装.NET3.5还需要安装盘.但是,很多人 ...

  4. 如何在windows2003(IIS6)下配置IIS,使其支持cshtml

    在开发环境机器上,安装WEB PAGES 后,会在 C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages 的下产生DLL 其中 Micr ...

  5. Martin Fowler谈微服务的优缺点

    很多开发团队已经认识到微服务架构比单体架构更优越.但是也有其他团队感觉到这是一种消弱生产力的负担.就像任何软件架构,微服务架构同样有利弊.为了能做出一个明智的选择,你必须了解这些应用并将它们运用到你特 ...

  6. 第二章 微服务网关基础组件 - zuul入门

    一.zuul简介 1.作用 zuul使用一系列的filter实现以下功能 认证和安全 - 对每一个resource进行身份认证 追踪和监控 - 实时观察后端微服务的TPS.响应时间,失败数量等准确的信 ...

  7. linux C++ 多线程使用pthread_cond 条件变量

    1. 背景 多线程中经常需要使用到锁(pthread_mutex_t)来完成多个线程之间的互斥操作. 但是互斥锁有一个明显到缺点: 只有两种状态,锁定和非锁定. 而条件变量则通过允许线程阻塞并等待另一 ...

  8. postgresql共享内存的三个结构体

    本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/16105797 postgresql的共享内存维护主要 ...

  9. CentOS6.4下安装Chrome

    因为蛋疼的glibc问题,(我就纳闷了,为何CentOS支持的glibc的版本就那么低呢,害得我至今还没把genymotion安装上), Chrome浏览器一直没安装上,不过终于找到了解决方案,安装派 ...

  10. cesium and three.js【转】

    https://blog.csdn.net/zhishiqu/article/details/79077883 这是威尔逊Muktar关于整合Three.js与铯的客人帖子.Three.js是一个轻量 ...