Bootstrap4
一、垂直對齊：Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。(row)
- align-items-start(預設)：置頂
- align-items-center：置中
- align-items-end：置底
- 程式碼：https://codepen.io/ugm/pen/LdXeyW
<div class="container">
<div class="row align-items-start my-3">
<div class="col-2"><div class="cell">A</div></div>
<div class="col-2"><div class="cell">B</div></div>
<div class="col-2"><div class="cell">C</div></div>
</div>
<div class="row align-items-center mb-3">
<div class="col-2"><div class="cell">A</div></div>
<div class="col-2"><div class="cell">B</div></div>
<div class="col-2"><div class="cell">C</div></div>
</div>
<div class="row align-items-end mb-3">
<div class="col-2"><div class="cell">A</div></div>
<div class="col-2"><div class="cell">B</div></div>
<div class="col-2"><div class="cell">C</div></div>
</div>
</div>
- css
.row{
background: #aa0;
border: 1px blue solid;
height: 100px;
}
.cell{
background: #ccc;
padding: 10px;
}
二、單獨針對 Column 做對齊的動作(col)
- align-self-start：置頂
- align-self-center：置中
- align-self-end：置底
- 程式碼：
<h4>單獨</h4>
<div class="row my-3">
<div class="col-2 align-self-start"><div class="cell">A</div></div>
<div class="col-2 align-self-center"><div class="cell">B</div></div>
<div class="col-2 align-self-end"><div class="cell">C</div></div>
</div>