如何用Bootstrap将标题与按钮对齐至同一高度（无需自定义CSS）

要实现标题与按钮垂直对齐且仅使用Bootstrap类，可通过以下修改完成：

• 为包含标题和按钮的d-flex容器添加align-items-center类，使子元素在垂直方向居中对齐
• 为<h3>标签添加mb-0类，移除标题默认的底部外边距，消除因默认间距导致的位置偏移

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML CSS JS</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
</head>
<body> 
    <div class='container'>
        <div class='breadcrumb d-flex justify-content-between align-items-center border-bottom pt-5'>
            <h3 class='text-center mb-0'>Title </h3>
            <button type='button' (click)='goBack()' class='btn btn-primary m-1'>Back</button>
        </div>
    </div>
</body>
</html>

关键类说明 #

• align-items-center：在flex布局中，让子元素沿垂直方向居中，确保标题和按钮处于同一水平位置
• mb-0：清除<h3>默认的底部外边距，避免标题因自带间距而位置偏上

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