代碼
<!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>
