【Bootstrap Learning】-6 Sizing

1. 選擇Documentation-- 選擇Utilites --選擇Sizing

2.相對寬度  w-25 w-50 w-75 w-100 w-auto mw-100

3.相對高度 h-25 h-50 h-75 h-100 h-auto mh-100

4. 

  <div class="container" style="width:50rem">
    <div class="p-3 bg-dark w-25">width-25%</div>
    <div class="p-3 bg-primary w-50">width-50%</div>
    <div class="p-3 bg-secondary w-75">width-75%</div>
    <div class="p-3 bg-success w-100">width-100%</div>
    <div class="p-3 bg-info w-auto">width-atuo</div>
    <div class="p-3 bg-warning mw-100">width-max-100%</div>
  </div>

5.

  <div class="container" style="height:500px">
    <div class="d-inline-block bg-dark h-25">height-25%</div>
    <div class="d-inline-block bg-primary h-50">height-50%</div>
    <div class="d-inline-block bg-secondary h-75">height-75%</div>
    <div class="d-inline-block bg-success h-100">height-100%</div>
    <div class="d-inline-block bg-info h-auto">height-atuo</div>
    <div class="d-inline-block bg-warning mh-100" >height-max-100%</div>
    <div class="d-inline-block bg-warning mh-100" style="height: 1000px;">height-max-100%</div>
  </div>

    如果是 mh-100，適用於本身的容器高度大於父容器高度的情況。