原文:Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mr_JavaScript/article/details/79677503

概括

一句话概括,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式。

关键字

1、col是column简写:列;

2、xs是maxsmall简写:超小, sm是small简写:小,  md是medium简写:中等, lg是large简写:大;

3、-* 表示占列数,即占每行row分12列栅格系统比;

4、.col-xs-* 超小屏幕如手机 (<768px)时使用;

     .col-sm-* 小屏幕如平板 (768px ≤ 宽度 <992px)时使用;

     .col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 < 1200px)时使用;

     .col-lg-* 大屏幕如大显示器 (≥1200px)时使用。

解释

1、栅格系统都会自动的把每行row分为12列, col-xs-*、col-sm-* 、col-md-*和.col-lg-* 后面跟的参数表示在当前的屏幕中的占列数。例如 <div class="col-xs-6 col-md-3"></div> 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列,也就是屏幕的一半(12/6列=2个div), .col-md-3 在中等屏幕中占3列也就是1/4(12/3列=4个div)。

2、反推,如果我们要在移动端并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在PC端上显示6个div(12/6个=每个占2列 ) ,则 col-md-2。

实例

例一:单独使用

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<!-- 说明:每row行共12列,分个3div,每个div平占4列,即3个*4列=12列 -->
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
<!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 -->
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<!-- 说明:每row行共12列,分个3div,每1,3个div占3列,第2个div则占6列,即3列+6列+3列=12列 -->
</div>
</div>

例二:混合使用

<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 类对应的样式;
-->

(完)

Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法的更多相关文章

  1. bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col-lg的理解

    摘要: bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义: .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 ( ...

  2. ②bootstrap栅栏使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. android 开发 实现一个app的引导页面,使用ViewPager组件(此引导的最后一页的Button会直接写在最后一页布局里,跟随布局滑进滑出)

    基本ViewPager组件使用方式与我之前写的https://blog.csdn.net/qq_37217804/article/details/80332634 这篇博客一致. 下面我们将重点详细解 ...

  4. Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法

    (1)概括          一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段        1.col是column简写:列: 2.xs是maxsmall简写:超小,  ...

  5. bootstrap 栅栏系统

    媒体查询 /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小 ...

  6. item布局里有button之类的子控件时,会截获焦点

    需要以上问题时,网上查了很多,结果都是使用android:descendantFocusability属性,设为blocksDescendants就ok了,(具体不详叙述) 可是我给item的根布局设 ...

  7. Flex 布局里 input 宽度最小 150px 的问题, 浏览器 BUG?

    今天在使用 flex 布局时, 发现当 flex 布局容器比小(小于 150px )时,里面的 input[text] 的宽度会比容器宽: <style> #main { width:12 ...

  8. iView栅格的使用

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

  9. vue iviem UI grid布局

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

随机推荐

  1. hdu4990 矩阵

    C - Reading comprehension Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  2. 用Python编写九九乘法表考虑print自动换行问题

    编写了一个简单的小程序九九乘法表,代码如下: for i in range(1,10): for j in range(1,i+1): print(" %d*%d=%d" % (j ...

  3. Tomcat 7 Connector 精读(1)

    这个类图是本人截取的最重要的类的方法和属性. 其中ProtocalHandler是协议处理器,tomcat支持的协议以下方法可以看到.不同协议实现了不同的ProtocalHandler类. publi ...

  4. ZOJ 2110 Tempter of the Bone(DFS)

    点我看题目 题意 : 一个N×M的迷宫,D是门的位置,门会在第T秒开启,而开启时间小于1秒,问能否在T秒的时候到达门的位置,如果能输出YES,否则NO. 思路 :DFS一下就可以,不过要注意下一终止条 ...

  5. centos 7 卸载 mariadb 安装mysql

    1,卸载mariadbsystemctl stop mariadbrpm -qa | grep mariadbrpm -e --nodeps mariadb-5.5.52-1.el7.x86_64rp ...

  6. Maven之(九)依赖关系

    在maven的管理体系中,各个项目组成了一个复杂的关系网,但是每个项目都是平等的,是个没有贵贱高低,众生平等的世界,全球每个项目从理论上来说都可以相互依赖.就是说,你跟开发spring的大牛们平起平坐 ...

  7. 由 “无法使用从远程表选择的&#160;lob&#160;定位符” 错误而引导出来的一系列问题解决方案

    周一上班遇到一个数据加工问题:无法使用从远程表选择的 lob 定位符,由于数据源表不是自己的,不能对源数据做修改,于是我打起了存储过程的主意 我们公司的存过是分三步走,第一层是同步源数据,第二层是对一 ...

  8. poj 1254 Hansel and Grethel

    Hansel and Grethel Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2199   Accepted: 100 ...

  9. uva1354 枚举二叉树

    这题很难,这几天一直在想这题,最后看了汝佳大哥的代码才明白.贴上代码 // UVa1354 Mobile Computing // Rujia Liu #include<cstdio> # ...

  10. Linux工具安装和常用配置

    1 常用开发工具安装 1 安装Mysql ①基本安装 wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm: s ...