左、中、右对齐按钮

Question

我正在使用 Bootstrap 4 测试版。我希望工作流导航部分中的按钮与左侧的后退按钮对齐，居中的两个取消按钮和右侧的下一步按钮。

这是我的编码方式：

  <button type="button" class="btn btn-secondary float-left">Back</button>
  <div class="text-center">
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="button" class="btn btn-secondary"">Save and Exit</button>
  </div>
  <button type="submit" class="btn btn-primary float-right">Next</button>

这已正确定位左侧按钮和中间按钮，但右侧按钮位于右侧其他按钮的下方。

我尝试将右侧按钮放在它自己的 div 中并删除浮动左侧。如何让它们全部对齐？

Answer 1

使用 flex 代替浮动：

<div class="d-flex justify-content-between">
  <button type="button" class="btn btn-secondary">Back</button>
  <div>
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="button" class="btn btn-secondary">Save and Exit</button>
  </div>
  <button type="submit" class="btn btn-primary">Next</button>
</div>