我们都知道bootstrap的栅格系统是为了实现网站的响应式布局，但bootstrap提供了一套响应式、移动设备优先的流式栅格系统，它会将网页分为12等价（宽度），举个例子，假设你设置最外层div的宽度为1200px，那么每一份就占100px。话不多说，直接上代码和效果图吧。 可见代码中的注释说明： 例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstarp 栅格系统</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"> <!--为了更好地适配移动设备，使用css的媒体查询功能--> <meta name="viewport" content="width=device-width,initial-scale=1" /> <style> .row div{ border: 2px solid #ff0000; height: 100px; } </style> </head> <body> <!--栅格系统，会将网页分为12等价（宽度） ，设置最外层div的宽度为1200px，每一份就是100px--> <!--三层，第一层必须指定container属性，第二层必须指定row属性--> <!--所有的div，如果不指定高度，默认是0px--> <div class="container"> <!--这里是内联样式来设置的宽度，将3个div分别分为3,4,3等份--> <div class="row"> <div style="width:30%">1</div> <div style="width:40%">2</div> <div style="width:30%">3</div> </div> <!--如果这里用col-4,则会被自动等分为3等份，因为12/3=4--> <div class="row"> <div class="col-4">1</div> <div class="col-4">2</div> <div class="col-4">3</div> </div> </div> </body> </html>如图： 例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstarp 栅格系统</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"> <!--为了更好地适配移动设备，使用css的媒体查询功能--> <!--viewport：视口；device-width：当前设备的宽度（浏览器自己读）；initial-scale=1代表100%的视区窗口用来显示--> <!--下面这行代码一定要加，不然在手机端响应不了--> <meta name="viewport" content="width=device-width,initial-scale=1" /> <style> .row div{ border: 2px solid #ff0000; height: 100px; } </style> </head> <body> <!-- col-xl-3:屏幕宽度大于1200px 即在超大屏幕上显示3列宽度(即3/12列，也就是container总宽度的25%，下面同理) col-lg-3:屏幕宽度大于992px 即在大型屏幕显示3列宽度 col-md-6:屏幕宽度大于768px 即在中型屏幕显示6列宽度 col-sm-6:屏幕宽度大于576px 即在小型屏幕显示6列宽度 col-12:屏幕宽度小于576px 即在超小屏幕显示12列宽度(100%) 与手机适配此设计 --> <div class="container"> <div class="row"> <div class="col-sm-9 col-12">第一行第一列</div> <div class="col-sm-3 col-12">第一行第二列</div> </div> </div> </body> </html>如图： 根据例2扩展例3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstarp 栅格系统</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"> <!--为了更好地适配移动设备，使用css的媒体查询功能--> <meta name="viewport" content="width=device-width,initial-scale=1" /> <style> .row div{ border: 2px solid #ff0000; height: 100px; } .container{ border: 5px solid yellow; } /*分辨率大于1200px的时候，因为bootstrap默认最大1140px*/ @media (min-width: 1200px) { .container{ max-width: 1300px; } } </style> </head> <body> <div class="container"> <div class="row"> <!--d-none d-sm-block 在中型屏幕以下浏览器上隐藏该元素 --> <!--d-none d-md-block 在大型屏幕以下浏览器上隐藏该元素（其他d-lg-block、d-xl-block同理） --> <!--反之： --> <!--d-sm-none 在中型屏幕以下浏览器上显示该元素，与d-none d-sm-block 是相反的效果（其他宽度的同理） --> <!--这里，我们以第一个为例： --> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block">1</div> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">2</div> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">3</div> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">4</div> </div> </div> </body> </html>好了，到这里你应该已经比较清楚bootstrap的栅格系统是怎么工作的了吧，不妨自己把代码写一写看看各种效果，这样子会理解得更快。
