代码
<!DOCTYPE html>
<html lang="en">
<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.min.css"/>
<style>
.row{
margin-bottom: 15px;
height: 100px;
background-color:#eeeeee;
}
[class*='col']{
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row align-items-start">
<div class="col">第1列</div>
<div class="col">第2列</div>
<div class="col">第3列</div>
</div>
<div class="row align-items-center">
<div class="col">第1列</div>
<div class="col">第2列</div>
<div class="col">第3列</div>
</div>
<div class="row align-items-end">
<div class="col">第1列</div>
<div class="col">第2列</div>
<div class="col">第3列</div>
</div>
<div class="row">
<div class="col align-self-start">第1列</div>
<div class="col align-self-center">第2列</div>
<div class="col align-self-end">第3列</div>
</div>
</div>
</body>
</html>
