摘要: bootstrap 柵格布局 css中的col-xs-,col-sm-,col-md-* 的意義：.col-xs-超小屏幕手機(768px), .col-sm-小屏幕平板(≥768px), .col-md-*中等屏幕桌面顯示器
首先說明：
1木羹、col-列歌逢；
2、xs-maxsmall旬昭，超锌袂亍聋涨；sm-small拓颓，凶鲁Α；md-medium御蒲，中等衣赶；
3、-表示占列厚满，即占自動每行row分12列柵格系統(tǒng)比府瞄；
4、col-xs-超小屏幕 手機 (<768px),
.col-sm-小屏幕 平板 (≥768px),
.col-md-中等屏幕 桌面顯示器 (≥992px)(柵格參數(shù)).
5、不管在哪種屏幕上遵馆，柵格系統(tǒng)都會自動的每行row分12列 col-xs-和col-sm- 和col-md-*后面跟的參數(shù)表示在當(dāng)前的屏幕中 每個div所占列數(shù)鲸郊。
例如 <div class="col-xs-6 col-md-3"> 這個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戈二；這樣我們就可以控制我們自己想要的什么排版了舒裤。
舉個例子吧：
<!DOCTYPE html>
<html>
<head>
<title> bootstrap 示例 </title>
<!-- Site CSS -->
<link rel="stylesheet">
<link rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<h4> Column 1 </h4>
這是第一個Column； 這是第一個Column觉吭；這是第一個Column腾供；這是第一個Column；這是第一個Column鲜滩；
這是第一個Column伴鳖；這是第一個Column；這是第一個Column徙硅；這是第一個Column榜聂；這是第一個Column；
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<h4> Column 2 </h4>
這是第二個Column闷游；這是第二個Column峻汉；這是第二個Column；這是第二個Column脐往；這是第二個Column休吠；這是第二個Column；
這是第二個Column业簿；這是第二個Column瘤礁；這是第二個Column；這是第二個Column梅尤；這是第二個Column柜思；這是第二個Column；
</div>
</div>
</div>
</body>
</html>
不同屏幕大小下的展示效果如下：
![]()
大屏
大屏
![]()
中屏
中屏
小屏
