本节课我们来开始学习 Bootstrap 的栅格对齐和排列，以实现更加灵活的布局操作。
一．栅格对齐
- 对于栅格系统中的行，我们可以其进行垂直对齐操作，如下表；
|
样式(作用域行间) |
| 居顶(默认) |
.align-items-start |
| 居中 |
.align-items-center |
| 居底 |
.align-items-end |
- 要实现垂直效果，需要给行.row 和列.c 设置高度；
<style>
.row {
height: 100px;
margin: 20px 0;
border: dashed 1px red;
}
.c {
border: solid 1px blue;
height: 30px;
}
</style>
- 如果我们要垂直居中，那么直接设置: .align-items-center
<div class="row align-items-center">
<div class="c col">第一列</div>
<div class="c col">第二列</div>
<div class="c col">第三列</div>
</div>
- 对于列来说，也有三种垂直居中的方法，如下表；
|
样式(作用域行间) |
| 居顶(默认) |
.align-self-start |
| 居中 |
.align-self-center |
| 居底 |
.align-self-end |
- 使用三种列垂直方案；
<div class="row align-items-center">
<div class="c col align-self-start">第一列</div>
<div class="c col align-self-center">第二列</div>
<div class="c col align-self-end">第三列</div>
</div>
- 如果我们要不足 100%填充的行实现水平对齐方式，参考下表；
|
样式(作用域行间) |
| 居左(默认) |
.justify-content-start |
| 居中 |
.justify-content-center |
| 居右 |
.justify-content-end |
| 间隔相等(分散) |
.justify-content-around |
| 两端对齐(分散) |
.justify-content-between |
- 每个列只占 3 个栅格列，共 3 列，然后实现间隔相等分散对齐；
<div class="row justify-content-around">
<div class="c col-3">第一列</div>
<div class="c col-3">第二列</div>
<div class="c col-3">第三列</div>
</div>
栅格排列
- 栅格的列可以排序，使用.order-N，N 最大值为 12；
- 如果我们要给一个三列的行的第一列排到最后，可以如下设置；
<div class="row">
<div class="c col-3 order-3">第一列</div>
<div class="c col-3 order-2">第二列</div>
<div class="c col-3 order-1">第三列</div>
</div>
- 使用.order-first，强行设置列为第一列，而.order-last 为最后一列；
<div class="row align-items-start">
<div class="c col-3 order-last">第一列</div>
<div class="c col-3">第二列</div>
<div class="c col-3 order-first">第三列</div>
</div>
- 使用.offset-N 或.offset-*-N 来设置列的偏移量，1 表示一个栅格列；
<div class="row align-items-start">
<div class="c col-3 offset-1">第一列</div>
<div class="c col-3">第二列</div>
<div class="c col-3 offset-1">第三列</div>
</div>
- 使用.ml-N 或.mr-N 来微调列距离，使用.ml-auto 和.mr-auto 来左右对齐；
<div class="row align-items-start">
<div class="c col-3">第一列</div>
<div class="c col-3 ml-2">第二列</div>
<div class="c col-3 ml-auto">第三列</div>
</div>
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.row{
border: red dashed 2px;
height: 100px;
margin: 20px 0;
}
.haha{
border: blue solid 1px;
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="haha col-sm-1 bg-danger align-self-lg-start">1</div>
<div class="haha col-sm-1 bg-warning">1</div>
<div class="haha col-sm-1 bg-primary align-self-lg-end">1</div>
<div class="haha col-sm-1 bg-light">1</div>
<div class="haha col-sm-1 bg-dark align-self-lg-start">1</div>
<div class="haha col-sm-1 bg-info">1</div>
<div class="haha col-sm-1 bg-success align-self-lg-end">1</div>
</div>
<div class="row align-items-center justify-content-between">
<div class="haha col-sm-1 bg-danger align-self-lg-start order-6">1</div>
<div class="haha col-sm-1 bg-warning order-7">1</div>
<div class="haha col-sm-1 bg-primary align-self-lg-end">1</div>
<div class="haha col-sm-1 bg-light">1</div>
<div class="haha col-sm-1 bg-dark align-self-lg-start">1</div>
<div class="haha col-sm-1 bg-info">1</div>
<div class="haha col-sm-1 bg-success align-self-lg-end">1</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
</html>
