简介
栅格系统也称为网格系统：把一行等分为12列，用col来设置元素要用12列中的多少列。Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
网格类
.col-sm-平板 -屏幕宽度等于或大于576px
.col-md-桌面显示器 -屏幕宽度等于或大于768px
.col-lg-大屏显示器 -屏幕宽度等于或大于992px
.col-xl-超大显示器 -屏幕宽度等于或大于1200px
.col- 针对所有设备
实例
- Bootstrap 自动布局，创建相等宽度的列
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container box">
<div class="row">
<div class="col bg-primary">
<h3>我是第一列图片位置</h3>
<p>第一列文字介绍</p>
</div>
<div class="col bg-info">
<h3>我是第二列图片位置</h3>
<p>第二列文字介绍</p>
</div>
<div class="col bg-secondary">
<h3>我是第三列图片位置</h3>
<p>第三列文字介绍</p>
</div>
</div>
</div>
</body>
</html>
运行结果：
2. 等宽响应式列
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container box">
<div class="row">
<div class="col-sm-4 bg-info">.col-sm-4</div>
<div class="col-sm-4 bg-primary">.col-sm-4</div>
<div class="col-sm-4 bg-success">.col-sm-4</div>
</div>
</div>
</body>
</html>
运行结果：
注意：在移动设备上，即屏幕宽度小于 576px 时，三个列将会上下堆叠排版。
3. 不等宽响应式列
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container box">
<div class="row">
<div class="col-sm-4 bg-info">.col-sm-4</div>
<div class="col-sm-8 bg-primary">.col-sm-8</div>
</div>
</div>
</body>
</html>
运行结果：
4. 平板、桌面、大桌面显示器、超大桌面显示器
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container box">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-info">
<p>1</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-success">
<p>2</p>
</div>
</div>
</div>
</body>
</html>
运行结果：
注意：宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。
5. 偏移列
格式： offset- * - *
第一个星号可以是 sm、md、lg、xl，表示屏幕设备类型；第二个星号可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
举例：.offset-md-4 是把.col-md-4 往右移了四列格。
主要代码：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container box">
<div class="row">
<div class="col-md-4 bg-success">.col-md-4</div>
<div class="col-md-4 offset-md-4 bg-danger">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3 bg-danger">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div>
</div>
</div>
</body>
</html>
运行结果：
