React Bootstrap Modal 关闭按钮必须用 closeButton={false} 禁用，写在 Modal.Header 上，禁用后需手动添加带 aria-label 和 onClick 的按钮；浮动标签依赖 form-floating 容器、input 与 label 的严格顺序及 form-control 类，结构错误则失效。
React Bootstrap 的 Modal 默认关闭按钮不能靠 CSS 隐藏，必须显式禁用；表单控件的浮动标签（floating label）样式受 form-control 类和父容器结构双重约束，改错一个 class 就会断掉浮动逻辑。
React Bootstrap Modal 关闭按钮必须用 closeButton={false} 禁用
原生关闭按钮是 Modal.Header 渲染的 DOM 节点，不是纯样式层。只写 display: none 或覆盖 .close 类无效——点击区域、aria-label="Close" 语义、键盘焦点都还在，无障碍测试直接失败。
-
closeButton={false}必须写在<Modal.Header>标签上，写在<Modal>或<Modal.Body>上完全不生效 - 错误写法：
closeButton="false"（字符串），正确是布尔值：closeButton={false} - 禁用后，你得手动加一个
<button type="button" aria-label="Close">，否则右上角空白且无法关闭 - 推荐定位方式：
position-absolute top-0 end-0（Bootstrap 5.3+ 工具类），比right: 1rem更适配 RTL 和响应式断点
自定义关闭图标别碰 .btn-close 类
.btn-close 是 Bootstrap 5 为 toast 和 alert 设计的，Modal 不监听它的 data-bs-dismiss="modal"。硬塞进去只会点不动，TypeScript 还会报 onClick 不兼容。
- React 中直接用
<FontAwesomeIcon icon={faXmark} />或 Unicode×，包在<button>里并绑定onClick={handleClose} - 如果坚持用伪元素方案，先清空背景：
.custom-close-button { background: none; padding: 0; }，再用::before { content: "×"; font-size: 1.5rem; line-height: 1; } - 千万别设
pointer-events: none或错乱z-index，否则按钮物理存在但点不中 - 深色模式下颜色失效？用
currentColor替代硬编码色值，比如color: currentColor;
表单浮动标签（floating label）依赖特定 HTML 结构
浮动标签不是纯 CSS 效果，它靠 <div class="form-floating"> 包裹 <input> + <label>，且 label 必须在 input 后面。顺序一错，标签就沉底不浮起。
立即学习“前端免费学习笔记（深入）”；
- 支持的控件包括：
input[type="text"]、input[type="email"]、input[type="password"]、select、textarea，但不支持自定义封装的React-Select等第三方组件 - 改颜色？直接覆盖
.form-floating > label的color和font-size，但别动top或transform——这些由 JS 在 focus/blur 时动态计算 - 想让 label 始终显示？加
data-bs-toggle="floating"没用，Bootstrap 5 没这属性；真要常驻，删掉form-floating改用普通label+margin-bottom - 输入框有边框圆角但 label 不对齐？检查是否漏了
form-control类——它是浮动逻辑的触发器之一
Modal 关闭按钮和浮动标签都依赖“结构正确性”而非单纯样式覆盖，改之前先确认父容器 class 是否完整、DOM 顺序是否合规，否则越调越偏。
