直接给.modal-title设color或font-size最常用且安全，但需注意继承问题、line-height缺失导致贴边、居中需调整.flex布局而非仅text-align，副标题需解除font-weight继承并微调间距，响应式字号宜用媒体查询而非fs-*类。
弹窗标题文字样式怎么单独控制
直接给 .modal-title 设 color 或 font-size 是最常用也最安全的做法，但要注意它默认继承自父级 .modal-header 的字体设置。如果项目里全局改过 font-family 或用了自定义字体栈，.modal-title 不会自动同步——得显式重写。常见错误是只设 font-weight 却漏掉 line-height，导致多行标题文字贴边、上下挤压。
-
.modal-title默认是font-size: 1.25rem（20px），比h5小，比普通段落大，改字号时建议用 rem 单位保持缩放一致性 - 别用
!important覆盖字体颜色，Bootstrap 5 的.modal-title权重已足够高；真要覆盖，优先检查是否被.text-*类（如.text-muted）干扰 - 如果标题里混用了
<small></small>副标题，<small></small>默认会缩小到 80% 并变浅色，但它的font-size是相对父元素计算的——所以改.modal-title字号后，<small></small>实际大小也会变，需同步调整
标题居中或对齐方式怎么调
.modal-title 默认左对齐，且包裹在 .modal-header 内，这个容器本身有 justify-content: space-between，所以右侧可能有关闭按钮占位。想居中，不能只给 .modal-title 加 text-align: center，否则在 flex 布局下无效；得改父容器的 flex 行为。
- 推荐做法：给
.modal-header加justify-content: center，同时确保关闭按钮（.btn-close）不破坏布局——它默认是margin-left: auto，居中后会跑到左边，需额外加margin-left: 0或用order调整顺序 - 右对齐更简单：直接给
.modal-title加margin-left: auto，它会在 flex 容器里右推，比改text-align更可靠 - 响应式对齐要注意：小屏下
.modal-header可能变成 column 布局，justify-content方向会变，测试时务必在手机尺寸下验证
副标题怎么和主标题协调排版
Bootstrap 允许在 .modal-title 里嵌套 <small></small>，但它不是独立组件，而是语义化副标题标签。它的样式由 .modal-title small 规则控制，默认 font-size: .875em、color: #6c757d。问题常出在两处：一是主标题加粗后，<small></small> 也跟着加粗（因为继承），二是移动端行高不够导致上下贴边。
- 解除加粗继承：明确写
.modal-title small { font-weight: normal; }，避免和主标题风格打架 - 调整垂直间距：
.modal-title > small没有默认margin，如果觉得紧，加margin-left: .25rem或用padding-top: .125rem微调，别碰line-height——它会连带影响主标题 - 深色模式下，
<small></small>的颜色变量是--bs-secondary-color，如果自定义了该 CSS 变量，<small></small>会自动适配，无需额外 media query
字体大小响应式断点怎么设才不冲突
Bootstrap 5 的 .modal-title 本身没提供响应式字号类（比如 .fs-sm 这类），得自己写媒体查询。但直接套用 fs-* 类到 .modal-title 上容易失效——因为 .fs-* 的 CSS 规则是针对普通文本设计的，没考虑 modal header 的 flex 环境和 padding 挤压。
- 稳妥做法：用
@media (max-width: 576px)单独写规则，例如.modal-title { font-size: 1.125rem; }，避免用fs-5这类工具类混搭 - 注意
.modal-dialog在小屏下是全宽，.modal-title宽度受限，字号太大反而换行，建议小屏字号不超过1.125rem（18px） - 如果用了 Sass，可复用 Bootstrap 的断点变量：
@include media-breakpoint-down(sm) { .modal-title { font-size: $font-size-base * 1.125; } }，比硬写像素更易维护
实际改排版时，最容易被忽略的是 .modal-header 的 padding 和 .modal-title 的 line-height 配合关系——哪怕只调一个，另一个没跟上，标题就会看起来“飘”或者“沉”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
