直接从bootstrap复制下来的code：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .row > div { background-color: #7bf563; border: 3px solid #2a70f1; } </style> </head> <body> <br> <div class="row"> <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 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 class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <br> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <br> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <br> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> <br> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <br> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </body> </html>
前4个 row：
- 如果设置类为col-md时，屏幕尺寸在992-1200是它的合理尺寸，
- 当小于屏幕尺寸小于922px（col-sm col-xs），每一单元格会独占一行
- 当屏幕尺寸大于1200px（col-lg）时，依然会按照设置的类的大小执行尺寸，没有就遵从上一次的布局
后2个row：
<div class="row"> ① <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> ② <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <--> row 代表一行 当屏幕尺寸在xs范围时，①的col-xs-12类生效，①独占一行 ，②的col-xs-6类也生效，②占半行 当屏幕尺寸在sm范围时，①的col-sm-6类生效，①占半行 ，②的c无类生效，②占剩下的半行 当屏幕尺寸在md范围时，①的col-md-8类生效，①占三分之二 ，②的col-md-4类也生效，②占三分之一 当屏幕尺寸在lg范围时，①②没有类生效，遵循屏幕尺寸小于lg的布局，以此类推 总结：在一个尺寸内，有就类就遵循类；小于这个尺寸时，有就类就遵循类，没有就独占一行；大于这个尺寸时，有就类就遵循类，没有就遵循上一次的布局。 </-->