對齊按鈕左側，中間，右側

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>