本文介绍在 bootstrap 3 中通过语义化 html 结构与 css 控制，替代 :before 伪元素方案，实现带 svg/glyphicon 图标与文本严格垂直居中对齐的折叠按钮，解决因伪元素渲染导致的图文错位问题。
本文介绍在 bootstrap 3 中通过语义化 html 结构与 css 控制，替代 :before 伪元素方案，实现带 svg/glyphicon 图标与文本严格垂直居中对齐的折叠按钮，解决因伪元素渲染导致的图文错位问题。
在 Bootstrap 3 中，直接使用 button:before 配合 content: url(...) "Text" 实现折叠按钮虽简洁，但存在显著缺陷：SVG 图标作为生成内容（generated content）插入时，其基线（baseline）默认与文本对齐，而不同图标尺寸、SVG viewBox 设置或字体行高差异极易造成视觉错位——常见表现为图标上浮或下沉，与“More/Less”文字无法水平居中。
推荐方案：放弃伪元素，改用结构化 HTML + Bootstrap 原生状态控制
Bootstrap 3 的 Collapse 插件会自动为触发元素添加 aria-expanded="true/false" 属性，并切换 collapsed 类。我们可利用该机制，通过纯 CSS 控制两组内容的显隐，确保图标与文本始终处于同一 DOM 行内流中，天然保持对齐：
<!-- 使用 <a> 标签更语义化（避免 button 默认样式干扰），并启用 aria-expanded -->
<a class="btn btn-link text-toggle"
data-toggle="collapse"
data-target="#collapseMoreDetails"
aria-expanded="false">
<span class="text-collapsed">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
More Details
</span>
<span class="text-expanded">
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
Less Details
</span>
</a>
<div id="collapseMoreDetails" class="collapse">
<!-- 折叠内容 -->
<p>This is the expanded content section.</p>
</div>配套 CSS（无需 JavaScript）：
/* 初始状态：展开态隐藏，折叠态显示 */
.text-toggle[aria-expanded="false"] .text-expanded {
display: none;
}
.text-toggle[aria-expanded="true"] .text-collapsed {
display: none;
}
/* 可选：增强图标与文本间距一致性 */
.text-toggle .glyphicon {
margin-right: 4px; /* 统一右侧间距 */
top: 2px; /* 微调垂直位置（如需） */
}关键优势说明：
✅ 天然对齐：<span> 内嵌图标与文本同属行内元素，受相同 line-height 和 vertical-align 影响，无伪元素基线计算偏差；
✅ 无障碍友好：aria-expanded 语义明确，屏幕阅读器可准确播报状态；aria-hidden="true" 确保图标不被重复朗读；
✅ 样式可控：图标与文本可独立设置 font-size、margin、color，且支持响应式调整；
✅ 兼容性强：不依赖 CSS content 的 URL 加载行为，避免跨域或加载失败导致文本缺失。
注意事项：
- 若需自定义 SVG 图标（非 Glyphicons），建议将 SVG 内联为 <svg> 元素而非 url()，以获得更精确的尺寸与对齐控制；
- btn-link 类默认去除边框与背景，若需保留点击反馈，可添加 :focus 或 :active 样式；
- 在较老浏览器中，aria-expanded 的初始值可能未被立即识别，建议在初始化后手动触发一次状态同步（通常 Bootstrap 自动处理）。
此方案不仅解决了对齐痛点，更提升了代码可维护性与可访问性，是 Bootstrap 3 折叠交互的最佳实践之一。
