Bootstrap中如何实现margin-left:5px效果为两个按钮添加间距？

方案1：Flex容器加gap类（Bootstrap 5+ 推荐） #

你已经在外层容器使用了d-flex类，直接给该容器添加Bootstrap原生gap工具类即可实现子元素间距，无需给按钮单独加类，也不需要额外自定义CSS：

<div class="d-flex gap-1">
     <button (click)="showPreviousYear()" *ngIf="showPreviousYearButton()" class="btn btn-primary">
         &lt; {{previousYear}}
     </button>
     <button (click)="showNextYear()" *ngIf="showNextYearButton()" class="btn btn-primary">
        {{nextYear}} &gt;
     </button>
</div>

gap类对应间距值：

• gap-1：0.25rem（约4px），最接近你需要的5px效果
• gap-2：0.5rem（约8px），可按需选择更大间距

方案2：按钮加左外边距类（全Bootstrap版本兼容） #

如果使用Bootstrap 4及更早版本，或需要单独控制单个按钮的间距，可直接用Bootstrap原生外边距类替代自定义的myClass：

• Bootstrap 5+ 用ms-1（margin-start缩写，对应左外边距）
• Bootstrap 4及更早版本用ml-1（margin-left缩写）
  修改后代码：

<div class="d-flex">
     <button (click)="showPreviousYear()" *ngIf="showPreviousYearButton()" class="btn btn-primary">
         &lt; {{previousYear}}
     </button>
     <button (click)="showNextYear()" *ngIf="showNextYearButton()" class="btn btn-primary ms-1">
        {{nextYear}} &gt;
     </button>
</div>

ms-1/ml-1对应左外边距为0.25rem（约4px），需要更大间距可替换为ms-2/ml-2（0.5rem约8px）。

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