引导基线对齐列中的标题标签

Posted 2023-03-05

【中文标题】引导基线对齐列中的标题标签

【英文标题】：Bootstrap baseline align a header tag within a column

【发布时间】：2020-02-03 05:22:04

【问题描述】：

我有以下引导代码：

<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 的基线对齐。

【问题讨论】：

align-bottom?

@temani-afif 不幸的是，这似乎不起作用......

【参考方案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>

【讨论】：

谢谢 -- 哪个选项更好？

@alex_lewis 没有更好；两者都是实现结果的不同方法。选择其中一个，考虑到您的完整代码，可能一个更合适（我不知道）

那太好了……我很快就会接受。再次感谢您的帮助。