Bootstrap中仅用border-2无法加粗.form-control边框，因默认border-width:1px权重高且缺border-style/color；需显式添加border及颜色类如border-primary，聚焦态、验证态、响应式及表格内使用均需额外处理。

form-control边框粗细不能只靠border-2

Bootstrap的.form-control默认设了border-width: 1px，且规则权重高；单独加border-2无效，因为它不带border-style和border-color，而.form-control本身又没被清掉边框（不像.btn那样默认border: 0）。你看到的是“宽度改了但颜色/样式没激活”，实际还是1px。

• 必须显式补全border（等价于border-style: solid）和border-{color}（如border-primary），例如：class="form-control border border-2 border-primary"
• 如果只想加粗不换色，用border border-2即可，颜色继承自--bs-border-color变量，深色模式下仍自动适配
• 别写border: 2px solid #007bff——会覆盖掉CSS变量，导致主题切换失效

focus状态边框粗细不同步是常见坑

用户点击输入框后，边框突然变回1px或颜色错乱，是因为.form-control:focus有独立声明：border-color: #007bff + box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25)。工具类border-2不会自动作用到:focus伪类上。

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

• 要让聚焦态也保持2px，必须额外覆盖：.form-control:focus { border-width: 2px !important; }
• box-shadow的0.25rem focus ring 会和2px边框重叠，视觉臃肿；建议同步调小：box-shadow: 0 0 0 0.15rem rgba(13,110,253,0.25)
• 验证状态（.is-invalid、.is-valid）同样需要单独处理，否则提交报错时边框又缩回1px

响应式边框粗细需手动写媒体查询

Bootstrap没有border-md-2这类响应式边框工具类。想在桌面端用2px、移动端退回1px，只能手写CSS。

• 推荐用Bootstrap内置断点：

  @media (min-width: 768px) {
    .form-control-thick {
      border-width: 2px !important;
    }
  }
  @media (max-width: 767.98px) {
    .form-control-thick {
      border-width: 1px !important;
    }
  }

• HTML中写：class="form-control form-control-thick"，并确保该CSS在Bootstrap CSS之后加载
• 注意：移动端1px物理像素可能渲染模糊，若真有高DPI适配需求，改用border-width: 0.0625rem（≈1px）而非像素值

表格内.form-control边框变粗后尺寸错位

给.table td .form-control加粗边框，常导致单元格撑开、文字换行或对齐偏移——因为border-width增加会直接扩大元素总宽高（左右各+粗细值），而表格默认border-collapse: collapse不预留空间。

• 解决办法一：给.form-control加box-sizing: border-box（Bootstrap 5 默认已设，不用重复）
• 解决办法二：用padding微调补偿，比如加2px边框就减1px左右padding，但需测试多浏览器渲染一致性
• 更稳妥做法：不加粗表格内表单边框，改用outline或box-shadow做视觉强调，避免布局扰动

真正容易被忽略的是：加粗边框会让.form-control在.input-group里和其他兄弟元素（如.btn、.input-group-text）高度不一致——因为那些组件的边框粗细没同步改，视觉上会明显“脱节”。