今天主要跟大家講解下bootstrap的柵格布局，以及使用過程中應該註意的問題

首先我們要使用bootstrp的柵格布局就必須使用HTML正確的基本結構

如下圖：

必須給要使用柵格布局的盒子定義class為container。目的一是為了在響應式的布局上給寬度約束，二是提供padding以至於不讓內容貼住瀏覽器的邊緣。

Class為row的盒子是指行的容器，bootstrap把一行分成了12等分，下面講解下col-xx-是怎麽使用的吧。

Bootstrap柵格布局中css中有四個類，分別是col-xs-, col-sm-, col-md-, col-lg-;

col-xs-是指超小屏幕 手機

col-sm-是指小屏幕 平板 >=768px

col-md-是指中等屏幕 桌面顯示器 >=992px

Col-lg- 是指大屏幕 大桌面顯示器 >=1200px

不管在哪種屏幕上，柵格系統都會自動的將每行分為12列，每個類後面接的值表示當前的屏幕中給個盒子所占的個數，

如：

該div在屏幕中占的位置是：col-xs-6是在超小屏幕中占6列，也就是整屏幕的一半（因為一共是12列）。col-md-3是在桌面顯示器中占1/4的大小。

更多參考：https://v3.bootcss.com/css/

（php開發,web前端，ui設計，vr開發專業培訓機構，v

bootstrap柵格布局-v客學院知識分享