前端col-xs-6 col-md-3的意思

一：首先看col-xs , col-sm , col-md , col-lg：

col-xs- maxsmall 超小屏幕手机 (<768px)

col-sm- small 小屏幕平板 (≥768px)

col-md- medium 中等屏幕桌面显示器 (≥992px)

col-lg- large 大屏幕大桌面显示器 (≥1200px)

二：后面的数字的意义
首先栅格系统会把一个百分百的屏幕分成12份，如果是
cosl-xs-6 就是在小屏幕的时候占屏幕的6格刚好就说手机屏幕的一半
col-md-3 就是当这个内容在电脑上显示，就占3格，刚好是电脑屏幕的1/4。

举个栗子：
这是一个论坛上的图（感谢qq_Timebegin_0）

这个图片中黄色框起来的部分，刚好加起来是12，也就是说在电脑上，，会这样

那左红色框起来的，超过12了，也就是一个满屏的格子数。怎么办呢？

前端会自动帮你换行，也就是说在手机上，这个内容会变成这样，因为你必须要占6格不会变，但是一行又放不下四个6。就会自动换行

前端col-xs-6 col-md-3的意思相关推荐

html代码 col,html元素col标签的使用方法及作用
html元素col标签的使用方法及作用详解如下: 标签的定义标签的"col"是"column"英文单词的缩写,中文有"列"的意思:标签是给表 ...
matlab中col什么意思,col是什么意思_col的翻译_音标_读音_用法_例句_爱词霸在线词典...
全部 Shenzhen post head village ventilation door col becomes fur coat industry garden address! 深圳岗头村风门 ...
2022-04-30前端周报巴厘岛项目交接.md
本周完成工作: 需求1开发; 需求2跟进联调; 项目31.项目32.项目33承接需求/跟进开发; 知识库文档总结; 一.需求1开发: 本周开发及联调完成, 目前已发布测试环境; 二.需求2跟进联调: ...
基于短周期价量特征的多因子选股体系的实现（三）----因子计算
计算结果展示计算过程接下来就写一个循环去计算每个因子,并且计算收益,最后将数据存储: def calculate_returns(excel_columns,stock_name,data):#创 ...
SQL Server中count(*), count(col), count(1)的对比
SQL Server中count(*), count(col), count(1)的对比原文:SQL Server中count(*), count(col), count(1)的对比让我们先看一下 ...
iview中的Col在vue/html-self-closing中识别错误
eslint-plugin-vue v5.2.2 目前只能使用i-col替代 <Row><Col>&l ...
Linux管线命令 - cut,grep,sort,uniq,wc,tee,tr,col,join,paste,expand,split,xargs
在每个管线后面接的第一个数据必定是『命令』喔!而且这个命令必须要能够接受 standard input 的数据才行,这样的命令才可以是为『管线命令』,例如 less, more, head, tail ...
定义一个三角形类(TRI)及其派生类三角柱体类(COL)。其中三角形类可以计算三角形的面积和周长；三角柱体类可以计算柱体的体积和表面积。其具体要求如下： (1)TRI的成员如下：  私有数据成员 
题目要求: 定义一个三角形类(TRI)及其派生类三角柱体类(COL).其中三角形类可以计算三角形的面积和周长:三角柱体类可以计算柱体的体积和表面积.其具体要求如下: (1)TRI的成员如下: 私有数据 ...
TABLE 的 COL 及 COLGROUP 元素
IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性 COLGROUP 元素指定表格中一列或一组列的默认属性. C ...
C语言三字棋优化，实现ROW*COL个格子，ZI字棋
三字棋优化 ,主要是针对棋局大小及方式的优化,可实现ROW*COL个格子,ZI字棋.也即棋盘方式,与下法都可以变化. 其中game.c中分别写了纯三字棋>优化>ROW*COL三字棋> ...

前端col-xs-6 col-md-3的意思

前端col-xs-6 col-md-3的意思相关推荐

最新文章

热门文章