bootstrap栅格参数： https://v3.bootcss.com/css/#grid-options
<!DOCTYPE html> <!-- saved from url=(0033)file:///D:/web/bootstrap/1-4.html --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1-4 栅格布局</title> <link rel="stylesheet" href="file:///D:/web/bootstrap/css/bootstrap.min.css"> <script src="file:///D:/web/bootstrap/js/jquery-3.5.1.min.js"></script> <script src="file:///D:/web/bootstrap/js/bootstrap.min.js"></script> <style> .show{border:1px solid #333; background-color:#9aeaff; height:30px;} .clear{padding:0px;} </style> </head> <body> <!-- 1. 分成2分 --> <p class="text-center">1. 基本布局</p> <div class="container"> <div class="row"> <div class="col-md-8 show">8</div> <div class="col-md-4 show">4</div> </div> </div> <!-- 2. 分成12分 --> <p class="text-center">2.等分12分</p> <div class="container"> <div class="row"> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> <div class="col-md-1 show">1</div> </div> </div> <!-- 3. 推拉 --> <p class="text-center">3.推拉 </p><p class="text-center">3-1 原始栅格</p> <div class="container"> <div class="row"> <div class="col-md-8 show">8</div> <div class="col-md-4 show">4</div> </div> </div> <p class="text-center">3-2 推拉之后的栅格</p> <div class="container"> <div class="row"> <div class="col-md-8 col-md-push-4 show">4</div> <div class="col-md-4 col-md-pull-8 show">8</div> </div> </div> <!-- 4. 嵌套 --> <p class="text-center">4. 嵌套</p> <p class="text-center"> 4.1 原始表格</p> <div class="container"> <div class="row"> <div class="col-md-9 show">9</div> <div class="col-md-3 show">3</div> </div> </div> <p class="text-center"> 4.2 嵌套表格</p> <div class="container"> <div class="row"> <div class="clear col-md-9"> <div class="col-md-3 show">3</div> <div class="col-md-4 show">4</div> <div class="col-md-5 show">5</div> </div> <div class="col-md-3 show">3</div> </div> </div> <!-- 5. 偏移 --> <p class="text-center">5. 偏移</p> <div class="container"> <div class="row"> <div class="col-md-4 show">4</div> <!-- 偏移两个栅格 --> <div class="col-md-4 col-md-offset-2 show">4</div> </div> </div> </body></html>
