网格布局
如图：
网格布局的列数最多可以分为12列
如果要列数大于12则会另起一行补齐多余的列数
份数相加小于12则会铺不满整个宽度
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Document</title> <style> [class^='col']{ background-color: aqua; border: 1px solid black; } </style> </head> <body> <div class="container"> <!-- 如果份数相加等于12 则能占满整个屏幕 --> <div class="row"> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> <div class="col-lg-1">1个列</div> </div> <br> <!-- 只要列数之和等于12就可以占满一行 --> <div class="row"> <!-- div{$}*4 --> <div class="col-lg-3">3</div> <div class="col-lg-3">3</div> <div class="col-lg-3">3</div> <div class="col-lg-3">3</div> </div> <br> <!-- 多余12会另起一行 --> <div class="row"> <div class="col-lg-1">1</div> <div class="col-lg-4">4</div> <div class="col-lg-2">2</div> <div class="col-lg-2">2</div> <div class="col-lg-3">3</div> <div class="col-lg-2">2</div> </div> <br> <!-- 如果份数相加小于12则会铺不满整个宽度 --> <div class="row"> <div class="col-lg-1">1</div> <div class="col-lg-3">3</div> <div class="col-lg-2">2</div> <div class="col-lg-2">2</div> <div class="col-lg-1">1</div> <div class="col-lg-2">2</div> </div> <br> </div> </body> </html>
bootstrap可以随着四种设备的比例进行相应的变化
超小设备（手机，小于 768px）
小型设备（平板电脑，768px 起）
中型设备（台式电脑，992px 起）
大型设备（大台式电脑，1200px 起）
基本的网格结构
下面是 Bootstrap 网格的基本结构：
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container"> </div>
所有的样式都是bootstrap中的css文件引入好的，直接拿来用就可以了
引入方法见https://blog.csdn.net/nanchen_J/article/details/120067609?spm=1001.2014.3001.5501
