<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery.min.js"></script> <style type="text/css"> .row{ margin-bottom: 20px; } [class*="col-"]{ padding-top: 15px; padding-bottom: 15px; background-color: #66afe9; border: 1px silver solid; } </style> <body> <div class="container"> <div class="row"> <!--最多一行12个 内容高度会根据内容自适应--> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> </div> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> </div> <div class="row"> <!--实现偏移--> <div class="col-md-4 col-lg-offset-1">col-md-4</div> </div> <!--嵌套 1和2嵌套在one里--> <div class="row"> <div class="col-sm-10"> one <div class="row"> <div class="col-xs-8"> 1 </div> <div class="col-xs-4"> 2 </div> </div> </div> </div> <!--左右互换--> <div class="row"> <div class="col-md-9 col-md-push-3">col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div> </div> </div> </body> </html>