【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，适用于本身的容器高度大于父容器高度的情况。