ブートストラップ4複数行のモーダルフッタを作成する

Question

ブートストラップ4でモーダルフッタを取得しようとしましたが、複数の100％幅の行があります。下の最も基本的なブートストラップ・モードの例では、「閉じる」ボタンと「変更を保存」ボタンを異なる行に置くことができますか？両方とも100％の幅ですか？

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h5 class="modal-title" id="exampleModalLongTitle">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> 

Answer 1

はい、2つのmodal-footer要素を配置することができます。

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> 
      <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h5 class="modal-title" id="exampleModalLongTitle">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 col-lg-12" class="btn btn-secondary" data-dismiss="modal">Close</button> 
       </div> 
       <div class="modal-footer"> 
        <button type="button col-lg-12" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
      </div> 
     </div> 

次に、あなたのCSSにここでは、この

#exampleModalLong .modal-footer .btn{ 
    width:100%; 
} 

を追加するにはjsfilldeにlink