Bootstrap 3输入组内按钮高度不一致问题及解决咨询

问题说明 #

在使用Bootstrap 3的Input Group组件时，仅包含Glyphicon图标的按钮，与左侧的input-group-addon、输入框高度不匹配，出现视觉错位。

解决方案 #

1. 先修复CSS加载语法错误 #

你的代码中Bootstrap CSS链接存在语法错误（href=&quotquot;多了一个quot），会导致样式无法正常加载，这是高度异常的潜在原因。先修正链接：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

2. 调整按钮内边距匹配组件高度 #

当按钮只有图标无文字时，Bootstrap默认的btn内边距和form-control、input-group-addon存在细微差异，可自定义CSS统一内边距：

.input-group-btn .btn {
    padding: 6px 12px; /* 和form-control默认内边距保持一致 */
    vertical-align: middle;
}

3. 排查并清除CSS冲突 #

如果页面有自定义样式或第三方CSS，可能会覆盖Bootstrap默认规则。通过浏览器开发者工具（F12）查看按钮和输入框的盒模型，若发现额外的margin、padding或固定height，针对性重置：

.input-group-btn .btn {
    margin: 0;
    height: auto; /* 避免固定高度导致不匹配 */
}

4. 升级Bootstrap版本（可选） #

你当前使用的3.1.1版本存在部分组件布局bug，升级到Bootstrap 3最新稳定版（3.3.7）可直接修复这类兼容性问题：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

内容的提问来源于stack exchange，提问作者Juna serbaserbi