对齐按钮左侧，中间，右侧

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

使用的柔性而不是浮动：

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