Angular UI中Bootstrap按钮与标题对齐异常问题求助

你的代码存在两个核心问题：

• 按钮容器的类名书写错误：justify-content-end-mt-3应改为justify-content-end mt-3，Bootstrap样式类名之间必须用空格分隔，否则无法识别多个样式规则。
• 当前标题与按钮分属两个独立容器，无法实现预期的对齐布局，需调整结构将二者纳入同一布局容器。

方案一：标题与按钮同一行左右对齐 #

如果想要标题左对齐、按钮右对齐且二者在同一行，修改代码如下：

<div class="container mt-3">
    <div class="d-flex justify-content-between align-items-center">
        <h1>Category List</h1>
        <a href="" class="btn btn-primary">Add Category</a>
    </div>
</div>

关键样式类作用：

• *d-flex*：将容器设置为flex布局，让内部元素可灵活排列
• *justify-content-between*：使内部元素分别靠向容器左右两端，实现左右分布的效果
• *align-items-center*：保证标题与按钮在垂直方向居中对齐，避免因字号差异导致的错位
• 将*mt-3*移至最外层container，统一控制顶部间距，减少冗余设置

方案二：标题单独一行、按钮靠右对齐 #

如果需求是标题在上单独一行，按钮靠右且与标题右侧边缘对齐，只需修正按钮容器的类名即可：

<div class="container">
    <h1 class="mt-3">Category List</h1>
    <div class="d-flex justify-content-end mt-3"> 
        <a href="" class="btn btn-primary">Add Category</a>
    </div>
</div>

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