bootstrap分级sizing

本文概述

  • 宽度尺寸
  • 身高尺码
  • 最大宽度
它用于调整元素的大小。通过使用尺寸实用工具,您可以使用我们的width和height实用工具轻松地使元素的宽度或高度(相对于其父元素)相同。默认情况下包括对25%、50%、75%和100%的支持。
宽度和高度实用程序是从_variables.scss中的$ sizes Sass映射生成的。当你需要在此处生成其他实用程序时,可以修改这些值。
宽度尺寸以下是按宽度调整元素大小的语法:
句法:
< 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 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, .1)">Height 25%< /div> < div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)">Height 50%< /div> < div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)">Height 75%< /div> < div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)">Height 100%< /div> < /div>

最大宽度你还可以将宽度和高度设置为最大值。
最大宽度:
句法:
max-width: 100%;

最大高度:
【bootstrap分级sizing】句法:
max-height: 100%;

    推荐阅读