如何调整按钮布局：添加间距并修正显示顺序问题

先修正代码中的语法错误 #

原代码存在几处语法问题，先修复这些才能保证功能正常：

• type"btn btn-primary" 错误：按钮样式应该用 class 属性，type 属性用于指定按钮类型（如button/submit），改为 class="btn btn-primary"
• placement"bottom" 错误：属性需要添加等号，改为 placement="bottom"（如果是Angular指令，也可以用[placement]="'bottom'"实现绑定）
• 按钮标签未闭合：<button 改为 </button>
• 可能的笔误：{{ open.invoice.model.label }} 中的model应该是modal，改为{{ open.invoice.modal.label }}

解决显示顺序反转问题 #

原因：每个按钮单独包裹在float-right的容器中，浮动元素会依次向右排列，后渲染的容器会停靠在前一个容器的左侧，导致显示顺序和代码顺序相反。

解决方法：将两个按钮放在同一个float-right容器内，容器内的元素会按照代码顺序从左到右显示：

<div class="float-right">
  <button
    class="btn btn-primary"
    type="button"
    (click)="openInvoiceModal(id!)"
    [tooltip]="open.invoice.modal.tooltip"
    placement="bottom"
  >
    {{ open.invoice.modal.label }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    (click)="closeInvoiceModal(id!)"
    [tooltip]="close.invoice.modal.tooltip"
    placement="bottom"
  >
    {{ close.invoice.modal.label }}
  </button>
</div>

解决按钮间距过近问题 #

在上述基础上，给按钮添加间距即可：

• 如果使用Bootstrap，可以直接用me-2（Bootstrap 5）或mr-2（Bootstrap 4）类给第一个按钮添加右侧外边距：

<div class="float-right">
  <button
    class="btn btn-primary me-2"
    type="button"
    (click)="openInvoiceModal(id!)"
    [tooltip]="open.invoice.modal.tooltip"
    placement="bottom"
  >
    {{ open.invoice.modal.label }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    (click)="closeInvoiceModal(id!)"
    [tooltip]="close.invoice.modal.tooltip"
    placement="bottom"
  >
    {{ close.invoice.modal.label }}
  </button>
</div>

• 如果不用框架，直接添加自定义样式：style="margin-right: 8px;"

更推荐的Flex布局方案 #

用Flex布局替代float，代码更简洁，间距和对齐更容易控制：

<div class="d-flex justify-content-end gap-2">
  <button
    class="btn btn-primary"
    type="button"
    (click)="openInvoiceModal(id!)"
    [tooltip]="open.invoice.modal.tooltip"
    placement="bottom"
  >
    {{ open.invoice.modal.label }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    (click)="closeInvoiceModal(id!)"
    [tooltip]="close.invoice.modal.tooltip"
    placement="bottom"
  >
    {{ close.invoice.modal.label }}
  </button>
</div>

• d-flex：将容器设为Flex布局
• justify-content-end：让内容靠右对齐
• gap-2：直接设置按钮之间的间距（无需单独给每个按钮加边距）

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