如何在Bootstrap中将标题与按钮对齐在同一行并调整垂直高度？

当然可以通过Bootstrap解决这个问题，只需调整容器的布局类和间距类即可，具体操作如下：

• 给外层的.breadcrumb容器添加以下Bootstrap类：
  • d-flex：让容器内元素横向排列
  • align-items-center：让标题和按钮垂直居中对齐
  • justify-content-between：自动分配左右空间，实现标题左对齐、按钮右对齐的布局
  • py-3：给容器添加上下内边距，将整体垂直位置向下调整，数值可按需修改（比如py-2间距更小，py-4间距更大）

修改后的完整代码：

<div class="breadcrumb d-flex align-items-center justify-content-between py-3">
   <h1 class="mb-0">This is a title</h1>
   <div class="d-flex align-items-center flex-wrap">
      <button type="button" (click)="goBack()" class="btn-green">
      Back
      </button>
   </div>
</div>
<div class="separator-breadcrumb border-top"></div>

补充说明 #

• 给h1添加mb-0是为了清除标题默认的下边距，避免和容器的间距产生冲突
• 如果对垂直位置还有更精准的需求，可以调整py-*的数值，或者搭配my-*类来调整外边距

内容的提问来源于stack exchange，提问作者aghrefy