栅格系统：
.row 1行12列
.col-md-3 占3列，一行就是4个
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Document</title> 7 <link rel="stylesheet" href="../bs/css/bootstrap.css"> 8 <link rel="stylesheet" href="../bs/css/bootstrap-theme.css"> 9 <script src="..bs/js/jquery.js"></script> 10 <script src="..bs/js/bootstrap.js"></script> 11 <style> 12 .container{ 13 background:green; 14 height:300px; 15 } 16 /*栅格必须放到container和row里面！*/ 17 .row{ 18 margin-bottom:15px; 19 } 20 </style> 21 22 </head> 23 <body> 24 <div class="container"> 25 <h1>Bootstrap栅格</h1> 26 <div class="row"> 27 <div class="col-md-3"> 28 <img src="../image/1.jpg" alt="" width="100%"> 29 </div> 30 <!-- col-md-fooset-3是偏移，如果同一行还有图片，就挤到下面了！ --> 31 <div class="col-md-3 col-md-offset-3"> 32 <img src="../image/1.jpg" alt="" width="100%"> 33 </div> 34 <div class="col-md-3"> 35 <img src="../image/1.jpg" alt="" width="100%"> 36 </div> 37 38 </div> 39 <div class="row"> 40 <div class="col-md-3"> 41 <img src="../image/1.jpg" alt="" width="100%"> 42 </div> 43 <div class="col-md-3"> 44 <img src="../image/1.jpg" alt="" width="100%"> 45 </div> 46 <div class="col-md-3"> 47 <img src="../image/1.jpg" alt="" width="100%"> 48 </div> 49 <div class="col-md-3"> 50 <img src="../image/1.jpg" alt="" width="100%"> 51 </div> 52 </div> 53 <div class="row"> 54 <div class="col-md-3"> 55 <img src="../image/1.jpg" alt="" width="100%"> 56 </div> 57 <div class="col-md-3"> 58 <img src="../image/1.jpg" alt="" width="100%"> 59 </div> 60 <div class="col-md-3"> 61 <img src="../image/1.jpg" alt="" width="100%"> 62 </div> 63 <div class="col-md-3"> 64 <img src="../image/1.jpg" alt="" width="100%"> 65 </div> 66 </div> 67 </div> 68 </body> 69 </html>