1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/bootstrap.css"/> 7 <script src="js/jquery.js"></script> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .row,.row div{ 14 border: 1px solid #000; 15 } 16 img{ 17 /* 50%; 18 height: 50%;*/ 19 /* 100px; 20 height: 200px;*/ 21 } 22 </style> 23 </head> 24 <body> 25 <div class="container"> 26 <!-- container-fluid类好像是浮动的 --> 27 <div class="row"> 28 <!-- 现有container类，下面是row类，里面是col-xs-4类，根据屏幕大小分成4种，如果都写上，就会自动识别屏幕，采取相应的栏数；只写一个就默认都是用这个栏数。col-lg-4-offset-4是自己向后挪4栏，学名“列偏移” --> 29 <div class="col-xs-4 col-xs-offset-4"><img src="1.jpg" alt=""></div> 30 <div class="col-xs-4"><img src="2.jpg" alt=""></div> 31 <div class="col-xs-4 col-lg-3"><img src="3.jpg" alt=""></div> 32 </div> 33 <!-- <div class="row"> 34 <div class="col-xs-4"><img src="1.jpg" alt=""></div> 35 <div class="col-xs-4"><img src="1.jpg" alt=""></div> 36 <div class="row"> 37 <div class="col-lg-2"><img src="2.jpg" alt=""></div> 38 <div class="col-lg-2"><img src="2.jpg" alt=""></div> 39 <div class="col-lg-2"><img src="2.jpg" alt=""></div> 40 <div class="col-lg-2"><img src="2.jpg" alt=""></div> 41 </div> 42 </div> --> 43 <div class="row"> 44 <div class="col-xs-4">php is very much!</div> 45 <div class="col-xs-4">php is very much!</div> 46 <div class="col-xs-4">php is very much!</div> 47 </div> 48 </div> 49 </body> 50 <script> 51 </script> 52 </html>