Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义
根据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-*的含义的更多相关文章
- 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- 小屏幕 平板 ( ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- bootstrap中栅格系统的原理
1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...
- Bootstrap3基础 栅格系统 列中有行,行中有列
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- iOS中获取系统相册中的图片
一.获取单张图片 思路: 1.利用UIImagePickerController可以从系统自带的App(照片\相机)中获得图片 2.设置代理,遵守代理协议 注意这个UIImagePickerContr ...
- 在js中获取在css中设置的background-image值
1. html部分 <div class="bg-color-two" id="bg_color_two" onclick="setBg(thi ...
- 【cl】在代码中查找系统页面中的代码方法
页面链接http://192.168.2.51:8080/xxcb1/xxbs/action/handling!view.action?toId=402882ae4e7d1761014e877fb22 ...
- Bootstrap4响应式布局之栅格系统
前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的.面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
随机推荐
- SpringApplication及banner的配置
配置SpringApplication 如果SpringApplication无法满足要求,你可以自己创建一个局部实例,然后对其进行设置: public static void main(String ...
- wls应用命令部署与卸载
1.查看wls节点运行状态 [root@localhost lib]# jps [root@localhost lib]# ss -tnlp|grep 23705 2.配置wls环境变量 [deplo ...
- UIButton设置按钮点击范围大于可视范围
自定义按钮类型CustomButton,继承UIButton,重写pointInside函数改变点击响应范围. 例如,按钮点击范围比实际高度上下增加6. CustomButton.h @interfa ...
- PE盘制作
我这里以大白菜为例来讲解这个一条龙的服务: 1.去大白菜官网下载一U盘制作工具: 2.准备一个4G以上的U盘(我这里建议16G比较好,这样制作完成之后,我们还可以拷贝几个常用的镜像进去,方便今后使用) ...
- Kotlin之定义函数
java: int add (int m ,int n){ return m+n; } void process(int m){ Systrm.out.println(m); } kotlin: fu ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- nodejs 之简单web服务器
1.service.js var http=require('http');//引入http模块 var fs=require('fs');//fs模块 var path=require('path' ...
- CircleCi 不更新某个分支的两种方法
概述 今天我发现我的所有项目的 CircleCi 部署全部都会更新 gh-pages 分支.找了好久,终于找到了不更新的方法.于是我总结了一下,记录下来,供以后开发时参考,相信对其他人也有用. onl ...
- Oracle中生成随机数的函数
在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...
- mybatis 动态SQL .2
目录 1.动态SQL:if 语句 2.动态SQL:if+where 语句 3.动态SQL:if+set 语句 4.动态SQL:choose(when,otherwise) 语句 5.动态SQL:tri ...