Bootstrap 中 resize: none 不生效的根本原因是其自带样式含 !important 且 overflow 默认为 visible，需配合 overflow: auto 和更高权重规则才能生效。
resize: none 能禁用拖动，但直接写在 textarea 上大概率失效——Bootstrap 的样式优先级更高，且默认设了 resize: vertical !important。
为什么 Bootstrap 里 resize: none 不生效
根本原因不是你写错了，而是 Bootstrap（尤其是 v4+）自带的 CSS 规则带 !important，比如：textarea { resize: vertical !important; }。你的普通规则权重不够，直接被覆盖。
更隐蔽的是：Bootstrap 模态框（.modal-body）常把 textarea 包在 flex 容器里，即使 resize: none 生效了，用户拖拽时看到的“拉伸感”其实是父容器滚动条在动，不是 textarea 本身在变。
- 打开开发者工具 →「Computed」面板 → 搜索
resize，确认最终值是不是none - 检查目标元素是否真是原生
textarea—— Ant Design、Element Plus 等库会套一层div，类名类似.el-textarea__inner，你写的textarea { ... }根本不匹配 - 别漏掉
overflow：CSS 规范要求resize只在overflow为auto、hidden或scroll时才起作用；textarea默认是visible，此时resize: none会被浏览器直接忽略
在 Bootstrap 项目中精准禁用某几个 textarea
全局重置风险太高，容易误杀日志面板、富文本编辑器等需要调整的场景。推荐按需加 class 控制：
- HTML 中写：
<textarea class="no-resize"></textarea> - CSS 写：
.no-resize { resize: none !important; overflow: auto; } - 如果它在模态框里，额外加：
.no-resize { flex-shrink: 0; }，并确保父容器（如.modal-body）没强制设overflow: auto（否则滚动条会抢走拖拽反馈） - 避免同时设
rows和height：二者冲突时渲染行为不一致，尤其在 Safari 下容易意外撑开或收缩
resize: vertical 是半残废方案，慎用
很多人以为设成 vertical 就“差不多禁用了”，其实它只锁宽度，高度仍可无限拉高——没有 max-height 时，可能拉到盖住提交按钮，或触发父容器溢出滚动。
- 错误写法：
textarea { resize: vertical; height: 100px; }——height是初始值，不构成约束 - 正确配对：
min-height: 4em; max-height: 12em; box-sizing: border-box;，把 padding 和 border 算进限制范围 - 移动端建议用
em或rem，避免px在缩放或不同设备上失准 - iOS Safari 有系统级绕过：长按 + 拖动可能触发原生缩放，
resize对这种行为完全无效
真正难的不是写哪一行 CSS，而是得确认它作用到了真实的 textarea 节点、没被第三方库的 !important 吞掉、且 overflow 和 flex 行为都配合到位——这些细节一漏，页面就还在“假装禁用”。
