浆纱

尺码-Bootstrap 5和Material Design 2.0

使用width和height实用程序轻松地将一个元素变宽或变高。

相对于父母

宽度和高度实用程序是从 _utilities.scss 中的实用程序API生成的。 包括对 25％， 50％， 75％， 100％， 和 auto 默认。根据需要修改这些值以生成不同的值 实用程序在这里。

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

          <div class="w-25 p-3" style="background-color: #eee">Width 25%</div>
          <div class="w-50 p-3" style="background-color: #eee">Width 50%</div>
          <div class="w-75 p-3" style="background-color: #eee">Width 75%</div>
          <div class="w-100 p-3" style="background-color: #eee">Width 100%</div>
          <div class="w-auto p-3" style="background-color: #eee">Width auto</div>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto 

          <div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
            <div
              class="h-25 d-inline-block"
              style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
            >
              Height 25%
            </div>
            <div
              class="h-50 d-inline-block"
              style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
            >
              Height 50%
            </div>
            <div
              class="h-75 d-inline-block"
              style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
            >
              Height 75%
            </div>
            <div
              class="h-100 d-inline-block"
              style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
            >
              Height 100%
            </div>
            <div
              class="h-auto d-inline-block"
              style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
            >
              Height auto
            </div>
          </div>

您还可以将 max-width：100％; 和 max-height：100％; 实用程序用作 需要。

... 

          <img src="https://mdbootstrap.com/img/new/slides/041.webp" class="mw-100" alt="..." />
Max-height 100% 

          <div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
            <div
              class="mh-100"
              style="width: 100px; height: 200px; background-color: rgba(0, 0, 255, 0.1)"
            >
              Max-height 100%
            </div>
          </div>

相对于视口

您还可以使用实用程序设置相对于视口的宽度和高度。


          <div class="min-vw-100">Min-width 100vw</div>
          <div class="min-vh-100">Min-height 100vh</div>
          <div class="vw-100">Width 100vw</div>
          <div class="vh-100">Height 100vh</div>