Title1

Title2

Title3

2-6 垂直對齊

一、垂直對齊:Bootstrap 4 有使用 Flexbox 語法,所以我們可以利用 Flexbox 的特性,輕易的將 Column 置頂、置中,與置底對齊。(row)

  1. align-items-start(預設):置頂
  2. align-items-center:置中
  3. align-items-end:置底
  4. 程式碼: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>

二、單獨針對 Column 做對齊的動作(col)

  1. align-self-start:置頂
  2. align-self-center:置中
  3. align-self-end:置底
  4. 程式碼:
    
    <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>