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教程栏目进行学习！

Atas ialah kandungan terperinci bootstrap col-sm col-md区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

bootstrap

sumber：php.cn

Artikel sebelumnya：bootstrap删格系统如何理解 Artikel seterusnya：thinkphp和bootstrap区别

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• 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

Isu terkini

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...

daripada 2024-04-06 20:22:15

0

1

454

Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...

daripada 2024-04-06 12:53:11

0

1

376

Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

daripada 2024-04-05 08:45:39

0

1

3443

Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...

daripada 2024-04-04 22:16:18

0

1

1450

Topik-topik yang berkaitan

Lagi>

• Bagaimana untuk memulihkan video yang telah dialih keluar secara rasmi daripada Douyin
• js untuk menjana nombor rawak
• Berapa tinggi Ethereum akan pergi?
• Bagaimana untuk memulihkan fail yang dipadam pada komputer
• Berapa tahun anda perlu membayar insurans perubatan untuk menikmati insurans perubatan sepanjang hayat?
• Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input
• Apakah yang perlu saya lakukan jika huruf Inggeris muncul apabila komputer dihidupkan dan komputer tidak boleh dihidupkan?
• Bagaimana untuk membuat wifi maya dalam win7