html - Bootstrap 基线对齐列中的标题标记

Question

我有以下 Bootstrap 代码:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<div class="row">
  <div class="col-sm-1" style="background: red;">
    1
  </div>
  <div class="col-sm-11 align-baseline" style="background: blue; padding-left: 0;">
    <h6 style="background: green;">some title:</h6>
  </div>
</div>

我希望绿色 h6 标签的底部位于蓝色 11 列 div 标签的底部

这可能吗？即绿色 h6 标签应与蓝色 11 列 div 的基线对齐。

Answer 1

您需要删除 h6 的默认底部边距并将其替换为顶部边距:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-sm-1" style="background: red;">
      1
    </div>
    <div class="col-sm-11 " style="background: blue; padding-left: 0;">
      <h6 style="background: green;" class="mb-0 mt-2">some title:</h6>
    </div>
  </div>
</div>

或者使用 flexbox 和 margin-top auto 对齐(仍然需要移除底部边距)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-sm-1" style="background: red;">
      1
    </div>
    <div class="col-sm-11 d-flex" style="background: blue; padding-left: 0;">
      <h6 style="background: green;" class="mb-0 mt-auto w-100">some title:</h6>
    </div>
  </div>
</div>