bootstrap包含了一个响应式的，移动设备优先，不固定的网格系统，可以随着屏幕的伸缩，改变列的大小和数量，同行最多12列。 代码使用@media根据屏幕的大小控制样式。 网格样式有4中类型，分别对应4中不同尺寸范围的屏幕样式， .col-xs- 设备小于768px .col-sm- 大于768px .col-md- 大于992px .col-lg- 大于1200px
一般我们要求行（row）放置在container 中，其设置了较为合适的内外边距，列包裹在row中，col不能超过12，超过的元素会换行。 例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>hello bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> div[class*="col-"]{ padding-top: 15px; padding-bottom: 15px; background-color: #007BFF; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2) } </style> </head <body> <div class="container"> <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> <div class="row"> <div class="col-md-6"> col-md-6,col-md-6,col-md-6,col-md-6,col-md-6,col-md-6,col-md-6, </div> <div class="col-md-6"> col-md-6 </div> </div> <div class="row"> <div class="col-md-4"> <div class="row"> <div class="col-md-4"> col-md-4 </div> <div class="col-md-8"> col-md-8 </div> </div> </div> <div class="col-md-4"> col-md-4 </div> <div class="col-md-4"> col-md-4 </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> col-md-4 col-md-offset-4 </div> </div> <div class="row"> <div class="col-md-4 col-md-push-8"> col-md-4 col-md-push-8 </div> <div class="col-md-8 col-md-pull-4"> col-md-8 col-md-pull-4 </div> </div> </div> </body> </html>