根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义:

.col-sm-* 小屏幕 手机 (≥ 576px)

.col-md-* 中等屏幕 平板 (≥ 768px)

.col-lg-* 大屏幕  桌面显示器 (≥ 992px)

.col-xl-* 超大屏幕 大桌面显示器 (≥ 1200px)

说明:

1.  col- 列;-*表示占列,即占自动每个row分12列栅格系统比;

2.sm-small  小; md-medium  中等; lg-large 大; xl-Extra large  超大.

3. 栅格系统自动将每个row分为12列,col-sm-* 星号所代表的参数表示当前屏幕中该div所占列数.

例如:<div class="col-sm-6  col-md-3"> 这个div 在小屏幕中占6列(放两个div),但是在中等屏幕中占3列(放四个div),如果我们需要在小屏幕上并排显示4个div,则col-sm-3;有助于解决排版问题;

4.案例:

     <div class="row">
//每row分为12列,每个div占用3列,在小屏幕上可以并排显示4个div
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>

5. .col-sm-* .col-md-* .col-lg-* .col-xl-* 混合使用其意义为在不同的屏幕大小情况下变更排版效果

     <div class="row">
//每row分为12列,在使用屏幕大小变化时,排版也随之变化,以下代码的意思是当屏幕为小屏幕时这个div占用9列,中等屏幕时占用6列,大屏幕时占用3列.
<div class="col-sm-9 col-md-6 col-lg-3"></div>
</div>

6.   .col 的用法:flexbox的网格自动进行布局意味着我们也可只设置一列的宽度,让并排的其他列自动调整大小

     <div class="row">
//每row分为12列,只指定一列的宽度5/12,剩余列自动平分剩余7/12
<div class="col"></div>
<div class="col-5">占用5/12</div>
<div class="col"></div>
</div>

Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有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. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  3. bootstrap中栅格系统的原理

    1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...

  4. Bootstrap3基础 栅格系统 列中有行,行中有列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. iOS中获取系统相册中的图片

    一.获取单张图片 思路: 1.利用UIImagePickerController可以从系统自带的App(照片\相机)中获得图片 2.设置代理,遵守代理协议 注意这个UIImagePickerContr ...

  6. 在js中获取在css中设置的background-image值

    1. html部分 <div class="bg-color-two" id="bg_color_two" onclick="setBg(thi ...

  7. 【cl】在代码中查找系统页面中的代码方法

    页面链接http://192.168.2.51:8080/xxcb1/xxbs/action/handling!view.action?toId=402882ae4e7d1761014e877fb22 ...

  8. Bootstrap4响应式布局之栅格系统

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的.面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo ...

  9. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

随机推荐

  1. SpringApplication及banner的配置

    配置SpringApplication 如果SpringApplication无法满足要求,你可以自己创建一个局部实例,然后对其进行设置: public static void main(String ...

  2. wls应用命令部署与卸载

    1.查看wls节点运行状态 [root@localhost lib]# jps [root@localhost lib]# ss -tnlp|grep 23705 2.配置wls环境变量 [deplo ...

  3. UIButton设置按钮点击范围大于可视范围

    自定义按钮类型CustomButton,继承UIButton,重写pointInside函数改变点击响应范围. 例如,按钮点击范围比实际高度上下增加6. CustomButton.h @interfa ...

  4. PE盘制作

    我这里以大白菜为例来讲解这个一条龙的服务: 1.去大白菜官网下载一U盘制作工具: 2.准备一个4G以上的U盘(我这里建议16G比较好,这样制作完成之后,我们还可以拷贝几个常用的镜像进去,方便今后使用) ...

  5. Kotlin之定义函数

    java: int add (int m ,int n){ return m+n; } void process(int m){ Systrm.out.println(m); } kotlin: fu ...

  6. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. nodejs 之简单web服务器

    1.service.js var http=require('http');//引入http模块 var fs=require('fs');//fs模块 var path=require('path' ...

  8. CircleCi 不更新某个分支的两种方法

    概述 今天我发现我的所有项目的 CircleCi 部署全部都会更新 gh-pages 分支.找了好久,终于找到了不更新的方法.于是我总结了一下,记录下来,供以后开发时参考,相信对其他人也有用. onl ...

  9. Oracle中生成随机数的函数

    在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...

  10. mybatis 动态SQL .2

    目录 1.动态SQL:if 语句 2.动态SQL:if+where 语句 3.动态SQL:if+set 语句 4.动态SQL:choose(when,otherwise) 语句 5.动态SQL:tri ...