【Bootstrap Learning】-6 Sizing_bootstrap h-25最小了吗-优快云博客

本文链接：https://blog.youkuaiyun.com/stu_20052369/article/details/89512628

本文详细介绍如何使用CSS中的相对宽度和高度属性，通过具体实例展示如何精确控制网页元素的大小，适用于网页布局设计与响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

  <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>

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