bootstrap col-sm col-md区别

bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式：

.col-xs- 超小屏幕 手机 (<768px)（推荐学习：Bootstrap视频教程）

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

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

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

首先说明：

1、col-列；

2、xs-maxsmall，超小；sm-small，小；md-medium，中等；lg-large，大；

3、-*表示占列，即占自动每行row分12列栅格系统比；

4、col-xs-*超小屏幕 手机 (<768px),

.col-sm-*小屏幕 平板 (≥768px),

.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

5、不管在哪种屏幕上，栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中每个div所占列数。

例如

这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

6、反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

以上是bootstrap col-sm col-md区别的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：

bootstrap

来源：php.cn

上一篇：bootstrap删格系统如何理解 下一篇：thinkphp和bootstrap区别

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• win10 1809稳定吗
  2020-01-15 11:18:13
• win10安装.Net Framework 3.5 sp1
  2020-01-15 10:58:09
• win10怎么连接外国网络
  2020-01-15 10:34:39
• win10更新1909要多久
  2020-01-15 10:16:56
• win10更新要多久
  2020-09-14 10:58:08
• win10游戏闪退修复办法
  2020-01-15 09:58:52
• win10蓝牙耳机麦克风不能用
  2020-01-15 09:36:25
• win10要装杀毒软件么
  2020-01-15 09:28:34
• win10许可证过期怎么激活
  2020-01-15 09:22:01
• win10重置卡在键盘布局解决办法
  2020-01-15 09:09:20

最新问题

页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...

来自于 2024-04-06 21:58:04

0

1

800

解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...

来自于 2024-04-06 20:22:15

0

1

454

使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...

来自于 2024-04-06 12:53:11

0

1

376

Web页面调整大小时，Bootstrap开关无法正常工作 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

来自于 2024-04-05 08:45:39

0

1

3443

在Laravel中以Bootstrap模式展示AWS PDF文件 我已经下载了awsurl，例如https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/655712202215174539...

来自于 2024-04-04 22:16:18

0

1

1450

相关专题

更多>

• word背景色怎么改成白色
• ipad上打开html文件的方法
• console.log 的用法
• mysql修改数据表名
• 惠普电脑怎么进入bios
• isalpha函数的用法
• 在国内比特币怎么买卖
• CSS滚动条样式