<p>加 justify-content-center 未居中是因为父容器缺少 d-flex；所有 Flex 工具类均需作用于显式声明的 Flex 容器，且 align-items-* 仅对直接子元素生效，轴向由 flex-direction 决定。</p>
为什么加了 justify-content-center 元素却没居中？
因为没加 d-flex —— flex 工具类必须作用在 flex 容器上，而 bootstrap 不会自动帮你设 display: flex。光写 justify-content-center 没用，浏览器根本不知道你在对齐谁。
-
justify-content-*、align-items-*、flex-grow-1等所有 Flex 类，都要求父容器先有d-flex（或d-inline-flex） - 栅格里的
.row虽然底层是 Flex，但它的 Flex 行为只体现在列（.col）的排列上；若想控制列内内容对齐，得给那个列本身加d-flex - 常见错误：给
<div class="text-center">加justify-content-center——无效，因为text-center是靠text-align实现的，和 Flex 无关
如何让两个同级按钮一左一右撑满容器？
用 ms-auto 推右边那个，比 float: right 或 margin-left: auto 更稳，尤其在 navbar、card-header 这类 Flex 容器里。
- 结构示例：
<div class="d-flex"><br> <button class="btn btn-sm">取消</button><br> <button class="btn btn-sm btn-primary ms-auto">确认</button><br></div>
-
ms-auto是 margin-start auto，在 LTR 页面中就是左外边距自动撑开，把元素“顶”到最右 - 别用
me-auto给左边按钮——它会把右边按钮挤出视口；也别给两个按钮都加flex-grow-1，那样它们会等宽，不是一左一右 - 响应式下依然有效：小屏时若容器变窄，
ms-auto仍能保证右侧按钮贴边，不会换行错位
为什么 align-items-end 没把文字顶到底部？
因为你没把目标容器变成 Flex 容器，或者子元素不是它的**直接子项**。
-
align-items-*只对 Flex 容器的**直接子元素**生效；如果中间嵌了一层<p>或<div>，那对齐就断掉了 - 正确做法：给包裹文字的列（比如
<div class="col-md-6">）加d-flex align-items-end，再确保文字标签（如<h3>）是它的直接子节点 - 注意
align-self-end和align-items-end的区别：前者只作用于单个子项，且会被父级align-items覆盖，除非显式设置 - 如果内容是表格或图片，记得检查是否设置了
height或min-height——Flex 对齐需要交叉轴上有“空间”才能生效
表单里输入框加 flex-grow-1 后按钮被压缩变形，怎么解？
这是 flex-shrink 和容器默认换行行为共同导致的，小屏下尤其明显。
- 问题根源：
flex-grow-1让输入框吃掉剩余空间，但按钮默认有flex-shrink: 1，当容器宽度不足时，它会被强制压缩（哪怕你写了flex-shrink-0，也可能被父级.row的flex-wrap: wrap干扰） - 解法一：给整个表单区域加
flex-nowrap，禁止换行，再配合flex-grow-1+flex-shrink-0 - 解法二（更推荐）：不用 Flex 控制宽度，改用 Bootstrap 栅格，比如
<div class="col"><input></div><div class="col-auto"><button></button></div>，语义清晰、响应安全 - 额外提醒：别在
<input>上同时用flex-grow-1和w-100，后者会覆盖 Flex 的宽度计算逻辑，造成不可预测结果
justify-）和交叉轴（align-）不是凭感觉分的，而是由 flex-row / flex-column 决定的；调了半天没反应，八成是改错了轴。 
