Question

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

以下是我编码的方式：

  <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>

左，中，右对齐按钮

1 个答案: