实例

<div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">高度为 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">高度为 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">高度为 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">高度为 100%</div>
    <div class="h-auto d-inline-block p-2 bg-warning">自动设置高度</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度为 100%</div>
</div>

间距

间距设置语法如下:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)

property 代表属性，包含：

• m - 用来设置 margin
• p - 用来设置 padding

sides 主要指方向：

• t - 用来设置 margin-top 或 padding-top
• b - 用来设置 margin-bottom 或 padding-bottom
• s - 用来设置 margin-left 或 padding-left
• e - 用来设置 margin-right 或 padding-right
• x - 用来设置 *-left 和 *-right
• y - 用来设置 *-top 和 *-bottom
• blank - 用来设置元素在四个方向的 margin 或 padding

size 指的是边距的大小：

• 0 - 设置 margin 或 padding 为 0
• 1 - 设置 margin 或 padding 为 $spacer * .25
• 2 - 设置 margin 或 padding 为 $spacer * .5
• 3 - 设置 margin 或 padding 为 $spacer
• 4 - 设置margin 或 padding 为 $spacer * 1.5
• 5 - 设置 margin 或 padding 为 $spacer * 3
• auto - 设置 margin 为 auto

看下部分边距的源码设置：

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

<div class="mx-auto" style="width: 200px;">
  元素设置居中
</div>
 
<form >
    <div class="form-row">
        <div class="form-group">
 
        <label for="text" class="mt-2">设置 margin-top：</label>
        <input type="text" class="form-control" id="text" placeholder="email"> 
        
        <label for="color" class="mt-2">颜色：</label>
        <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off" value="#656565">
        </div>
    </div>
</form>