本文概述
- 宽度尺寸
- 身高尺码
- 最大宽度
宽度和高度实用程序是从_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%;
推荐阅读
- Bootstrap教程目录
- bootstrap排版
- bootstrap间距spacing
- bootstrap屏幕阅读器
- bootstrap响应助手
- bootstrap的position用法
- bootstrap invisible内容
- bootstrap图像替换
- bootstrap display属性