育將電腦工作室 - 線上書籍

Bootstrap4
==========

一、垂直對齊：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> ```
  <pre class="brush:as3;">
  <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>
  ```
5. css ```
  <pre class="brush:as3;">
  .row{
    background: #aa0;
    border: 1px blue solid;
    height: 100px;
  }
  .cell{
    background: #ccc;
    padding: 10px;
  }
  ```
 
二、單獨針對 Column 做對齊的動作(col)

1. align-self-start：置頂
2. align-self-center：置中
3. align-self-end：置底
4. 程式碼： ```
  <pre class="brush:as3;">
  
    <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>
  ```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown