Bootstrap Table列切换按钮尺寸小于其他按钮的原因及解决办法

• 先定位按钮的CSS类：打开浏览器开发者工具（F12），选中列切换按钮，查看其类名（通常是btns-column-toggle搭配btn btn-default）。
• 添加自定义CSS覆盖默认样式，确保和其他按钮的尺寸、对齐一致：

/* 统一列切换按钮的内边距、字体大小 */
.btns-column-toggle.btn {
  padding: 6px 12px; /* 匹配你项目中其他.btn的padding值 */
  font-size: 14px; /* 匹配其他按钮的字体大小 */
  line-height: 1.42857;
}

/* 调整图标对齐与大小，避免图标过小导致按钮整体收缩 */
.btns-column-toggle.btn .glyphicon {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 4px; /* 图标和文字间增加间距，更美观 */
}

• 如果上述样式不生效，尝试提高选择器优先级，比如结合表格的容器类：

/* 更高优先级的选择器，确保样式生效 */
.table-wrap .btns-column-toggle.btn {
  padding: 6px 12px;
  font-size: 14px;
}

补充说明 #

问题根源通常是Bootstrap Table的列切换按钮默认样式和你项目中自定义的按钮样式不匹配，或者图标元素的尺寸/对齐没有和其他按钮统一。通过开发者工具对比其他按钮的padding、font-size、line-height等属性，然后针对性覆盖即可。

内容的提问来源于stack exchange，提问作者Patrick S