Bootstrap基线在列中对齐标题标签

Question

我有以下引导代码：

<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>

Answer 2

我认为您可以在h6标签中使用此类“ align-bottom”

https://getbootstrap.com/docs/4.3/utilities/vertical-align/