【Bootstrap 笔记】移动设备优先，宽度的计算方法

admin

Bootstrap规定移动设备优先
手机、平板、中等电脑屏幕、大桌面电脑屏幕显示规格，与类前缀

设备类型	超小屏幕            手机 (<768px)	小屏幕            平板 (≥768px)	中等屏幕            桌面显示器 (≥992px)	大屏幕            大桌面显示器 (≥1200px)
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

代码：

1. <div class="container">
   
2.                 <div class="row">
   
3.                         <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
   
4.                 </div>
   
5.     </div>

复制代码

理解：
col-xs- 代表手机，即屏幕宽度小于768像素的时候
col-md-代表中等屏幕 即屏幕宽度大于768px小于等于992px的时候
宽度满屏就是12

1. <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

复制代码

可以理解为：当设备为手机（宽度<768px）的时候，显示为满屏，当设备为中等屏幕（768px<宽度≥992px）的时候，则显示总宽度的十二分之八的宽度

如图：