bootstrap 4模態 - 將模式內的按鈕向左移動

我有一個模式，我在引導4中使用，但是我喜歡將'取消'和返回按鈕移動到模態的左側。我有一個工作js小提琴在這裏：https://jsfiddle.net/andrewsolis/08v6znox/。這裏也是我的html代碼：bootstrap 4模態 - 將模式內的按鈕向左移動

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

的一般模式的文檔提供here已經做什麼，我需要它，它只是搞清楚如何使模態浮動左邊是一個問題的按鈕。我嘗試將類pull-left附加到按鈕上，但沒有運氣。任何幫助將不勝感激。

謝謝。

來源

2017-07-24 ans

您需要覆蓋默認的Bootstrap css。

就在你的CSS補充一點：

.modal-footer { 
    -webkit-box-pack: start; 
    -webkit-justify-content: flex-start; 
    -ms-flex-pack: start; 
    justify-content: flex-start; 
}

這裏是更新jsfiddle。

您可以在這裏閱讀更多關於Bootstrap套件的響應式Flexbox實用程序https://v4-alpha.getbootstrap.com/utilities/flexbox/

來源

2017-07-24 19:57:04

bootstrap 4模態 - 將模式內的按鈕向左移動

回答

相關問題