bootstrap提供了一個非常實用的柵格系統，可以實現響應式的網格布局，原理其實很簡單，利用了float、百分比的寬度和@media的配合實現響應式，bootstrap默認把一行分為了12列，提供了xs、sm、md、lg四個不同的尺寸，而這四種尺寸其實是一樣大的，只是在不同的頁面寬度才會觸發列的浮動，例如xs是最小的，不管頁面多大都會觸發列的浮動，而sm只有頁面在768px以上才會觸發，下面就以xs和sm這兩個尺寸來實現柵格系統：
首先所有的列都要放在一個行里，所以在列的外包裹元素上添加一個類名row：
<div class="row">
而這個row並不需要設置過多的樣式，只是將左右外邊距設為了-15px，這是因為bootstrap為所有的列都添加了15px的左右內邊距，讓柵格中的列之間有間距但又不希望左右兩邊的列有多余的空隙，所以在row中設置負值的外邊距抵消。
由於列會浮動，所以row還需進行浮動的清除，使用clearfix來清除：
.row:after { content: ''; display: block; visibility: hidden; clear: both; }
里面的列這里只用col-xs-3,col-xs-6,col-xs-4,col-sm-3,col-sm-6這幾個來演示，就像上面所說的，所有的列都有相同的左右內邊距，所以先為它們設置一個公共樣式：
.col-sm-3, .col-sm-6, .col-xs-3, .col-xs-4, .col-xs-6 { padding: 0 15px; }
xs的在任何頁面大小中都會使列浮動：
.col-xs-3, .col-xs-6, .col-xs-4 {
float: left;
}
.col-xs-3 {
/*3代表占3份即3/12=1/4*/
width: calc(100% / 4);
}
.col-xs-6 {
width: calc(100% / 2);
}
.col-xs-4 {
width: calc(100% / 3);
}
而sm的需要頁面在768px以上才浮動，所以可以使用@media：
@media (min-width: 768px) { .col-sm-3, .col-sm-6 { float: left; } .col-sm-3 { width: calc(100% / 4); } .col-sm-6 { width: calc(100% / 2); } }
這樣在768px以下，sm呈現的就是垂直布局。
演示代碼：
<div class="container"> <div class="row"> <div class="col-xs-3">.col-xs-3</div> <div class="col-xs-6"> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div> </div> <div class="col-xs-3">.col-xs-3</div> </div> <div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-3">.col-sm-3</div> </div> </div>
在頁面較小時，sm為垂直排列：
在頁面大於768px時，布局相同：
這里的.container也是利用了@media的方式使該容器在不同頁面寬度下有不同的大小，並且左右外邊距設為了auto，所以會自動居中，在頁面寬度較小的情況下會占滿頁面。
完整代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <link rel="stylesheet" href="./css/reset.css"> 10 <style> 11 * { 12 box-sizing: border-box; 13 } 14 .container { 15 padding: 0 5px; 16 margin-right: auto; 17 margin-left: auto; 18 } 19 @media (min-width: 768px) { 20 .container { 21 width: 750px; 22 } 23 } 24 @media (min-width: 992px) { 25 .container { 26 width: 980px; 27 } 28 } 29 @media (min-width: 1200px) { 30 .container { 31 width: 1120px; 32 } 33 } 34 div { 35 text-align: center; 36 } 37 .row { 38 margin: 0 -15px; 39 background: yellow; 40 } 41 .row:after { 42 content: ''; 43 display: block; 44 visibility: hidden; 45 clear: both; 46 } 47 .col-sm-3, .col-sm-6, .col-xs-3, .col-xs-6 { 48 padding: 0 15px; 49 } 50 .col-xs-3, .col-xs-6, .col-xs-4 { 51 float: left; 52 } 53 .col-xs-3 { 54 width: calc(100% / 4); 55 } 56 .col-xs-6 { 57 width: calc(100% / 2); 58 } 59 .col-xs-4 { 60 width: calc(100% / 3); 61 } 62 @media (min-width: 768px) { 63 .col-sm-3, .col-sm-6 { 64 float: left; 65 } 66 .col-sm-3 { 67 width: calc(100% / 4); 68 } 69 .col-sm-6 { 70 width: calc(100% / 2); 71 } 72 } 73 </style> 74 </head> 75 <body> 76 <div class="container"> 77 <div class="row"> 78 <div class="col-xs-3">.col-xs-3</div> 79 <div class="col-xs-6"> 80 <div class="row"> 81 <div class="col-xs-4">col-xs-4</div> 82 <div class="col-xs-4">col-xs-4</div> 83 <div class="col-xs-4">col-xs-4</div> 84 </div> 85 </div> 86 <div class="col-xs-3">.col-xs-3</div> 87 </div> 88 <div class="row"> 89 <div class="col-sm-3">.col-sm-3</div> 90 <div class="col-sm-6">.col-sm-6</div> 91 <div class="col-sm-3">.col-sm-3</div> 92 </div> 93 </div> 94 </body> 95 </html>