如何解决Bootstrap按钮之间出现非预期空白间距的问题

在Bootstrap项目中，当我们将多个按钮放在同一行时，经常会观察到按钮之间存在一段非预期的空白间距。这段间隙往往不是通过margin或padding显式设置的，而是来源于浏览器对inline-block元素的处理机制。

问题产生的原因

Bootstrap的.btn类默认将按钮设置为display: inline-block。在HTML源码中，如果多个inline-block元素之间存在换行符或空格，浏览器就会把这些空白字符渲染成一个可见的空隙。例如下面这段代码：

<button class="btn btn-primary">保存</button>
<button class="btn btn-default">取消</button>

两个<button>标签之间的换行和缩进会被当作一个空格，从而在按钮中间显示出空白。

使用Bootstrap原生方案

Bootstrap提供了.btn-group类，用于将一组按钮包裹起来并消除它们之间的间隙。其原理是设置font-size: 0再在按钮上恢复字号，或者使用flex布局。

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">左</button>
  <button type="button" class="btn btn-default">中</button>
  <button type="button" class="btn btn-default">右</button>
</div>

不使用btn-group时的CSS修复

如果因为布局原因不能使用.btn-group，可以通过父容器设置font-size: 0来去掉空白，再给按钮单独设回字体大小：

.btn-container {
  font-size: 0;
}
.btn-container .btn {
  font-size: 14px;
}

通过HTML写法消除间隙

也可以直接去掉标签之间的换行，让按钮紧挨着写。但这种方式会降低代码可读性，不推荐在大型项目中大量使用。

<button class="btn btn-primary">保存</button><button class="btn btn-default">取消</button>

使用Flex布局彻底解决

现代浏览器支持下，将父容器设为flex是最干净的做法，既不会有多余空格，也便于控制对齐：

.btn-row {
  display: flex;
  gap: 0;
}

<div class="btn-row">
  <button class="btn btn-primary">确定</button>
  <button class="btn btn-default">返回</button>
</div>

方案对比

通过上述方法，你可以根据实际项目情况选择最合适的处理方式，确保Bootstrap按钮之间的间距完全符合设计需求。

Bootstrap按钮间距inline-block空白间隙CSS修复修改时间：2026-07-25 13:45:24