如何在Bootstrap中为按钮添加间距？附现有代码库下按钮显示情况

嘿，我来给你梳理几种在Bootstrap里给按钮添加间距的实用方法，都是项目里常用的方案：

1. 用Bootstrap内置间距工具类（最推荐） #

Bootstrap本身自带了一套标准化的间距工具类，完全不用写额外CSS，还能保持框架风格统一：

• 给按钮加右侧横向间距：Bootstrap 5+用me-*，Bootstrap 4及更早版本用mr-*，比如：

  <button class="btn btn-primary me-2">按钮1</button>
  <button class="btn btn-secondary">按钮2</button>
  

  这里的2对应预设的间距大小，可选值从0到5，数值越大间距越宽，还支持auto值。
• 给按钮加上下纵向间距：用my-*（同时控制上下），或者单独用mt-*（上间距）、mb-*（下间距）：

  <button class="btn btn-primary mb-3">按钮1</button>
  <button class="btn btn-secondary">按钮2</button>
  

• 批量按钮统一加间距：Bootstrap 5.1+支持用gap类，把按钮放在带d-flex gap-3的容器里，就能自动给所有按钮之间加上均匀间距：

  <div class="d-flex gap-3">
    <button class="btn btn-primary">按钮1</button>
    <button class="btn btn-secondary">按钮2</button>
    <button class="btn btn-success">按钮3</button>
  </div>
  

2. 自定义CSS类（适合特殊需求） #

如果内置类满足不了你的自定义间距要求，可以自己写个简单的CSS类：

.btn-custom-spacing {
  margin-right: 1.2rem; /* 自定义横向间距 */
  margin-bottom: 0.8rem; /* 自定义纵向间距 */
}

然后给需要加间距的按钮挂上这个类就行：

<button class="btn btn-primary btn-custom-spacing">按钮1</button>
<button class="btn btn-secondary">按钮2</button>

3. 用Bootstrap按钮组组件（适合关联操作按钮） #

如果你的按钮是一组功能关联的操作（比如编辑、保存、取消），直接用btn-group组件，它会自动给按钮之间加上适配的间距：

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">编辑</button>
  <button type="button" class="btn btn-secondary">保存</button>
  <button type="button" class="btn btn-danger">取消</button>
</div>

要是需要垂直排列按钮，换成btn-group-vertical就能自动处理垂直方向的间距了。

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