<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>栅格系统</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .a{ height: 50px; border: 1px solid #ccc; background-color: #eee; } </style> </head> <body> <!-- <div class="container"> <div class="row"> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> <div class="col-md-1 a">1</div> </div> <div class="row"> <div class="col-md-9 a">9</div> <div class="col-md-3 a">3</div> </div> <div class="row"> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> </div> </div> --> <!-- <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div> </div> </div> --> <div class="container"> <div class="row"> <div class="col-md-8 a">8</div> <div class="col-md-3 col-md-offset-1 a">3</div> </div> <div class="row"> <div class="col-md-9 a" style="padding: 0"> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> <div class="col-md-4 a">4</div> </div> <div class="col-md-3 a">3</div> </div> <div class="row"> <div class="col-md-9 col-md-push-3 a">9</div> <div class="col-md-3 col-md-pull-9 a">3</div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图: