web-dev-qa-db-ja.com

Bootstrap 4のモーダルフッターボタンを左右に揃える

ブートストラップ4は、モーダルフッターにフレックスボックスを使用します。左側に1つ、右側に1つの2つのボタンが必要な場合、どのようにすれば適切に機能しますか？

以下のコードは、div.rowでcol-sm-6を使用しようとしますが、動作しません。

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

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

<!-- Modal -->
<div class="modal fade" id="myModal" 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">
      <div class="row">
        <div class="col-sm-6 text-left">
        <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        <div class="col-sm-6 text-right">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
twitter-bootstrapbootstrap-4twitter-bootstrap-4
42
Sean

Bootstrap 4でmodal-footerが "display：flex"になったので、自動マージンを使用するのが最も簡単です。左のボタンでmr-autoを使用します。

<div class="modal-footer">
     <button type="button" class="btn btn-primary mr-auto">Save changes</button>
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

デモ

参照： Bootstrapのdiv内で左揃えおよび右揃え

102
Zim

modal-footerはdisplay:flex;です。そのため、要素（ボタンなど）を整列させるより良い方法は、フレックスルールを使用することです。 Bootstrap 4は、それらのフレックスルールを変更するための新しいユーティリティクラスを提供します（例： .justify-content-[modifier] ）。だから私はより良いオプションが次のようであるべきだと思う：

<div class="modal-footer justify-content-between">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

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

<!-- Modal -->
<div class="modal fade" id="myModal" 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 justify-content-between">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
11
jmboiton

IEで機能する唯一の方法は、w-100を使用することです。 mx-autoとmrおよびml-autoはすべて、含む要素からボタンをオーバーフローさせるようです。

<div class="modal-footer">
  <div class="w-100">
    <button type="button" class="btn btn-default">Cancel</button>
    <button type="button" class="btn btn-primary float-right">Save</button>
  </div>
</div>
5
Ryan M

Bootstrap 4の場合

Spacingを使用します。Bootstrapには、要素の外観を変更するためのさまざまな短縮および埋め込み応答マージンユーティリティクラスが含まれています。クラスは、xsの場合は{property} {sides}-{size}、sm、md、lg、xlの場合は{property} {sides}-{breakpoint}-{size}の形式を使用して名前が付けられます。

詳細はこちら： https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
1
Gonen09

IEの場合、親要素にbootstrapヘルパークラスフォーム.justify-content-betweenを使用できます。この場合、.modal-footer。

例えば：

<div class="modal-footer justify-content-between">
     <button type="button" class="btn btn-primary">Save changes</button>
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
0
Markus Krause
  <div class="modal-footer justify-content-start">
                    <input type="hidden" value="" name="">
                    <button id="pagePrintBtn" type="button" class="btn btn-primary">Print</button>
                    <button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Delete</button>
                    <button type="button" class="btn btn-primary" id=asd>Save</button>
                </div>
0
user9254092

3つのボタンが必要な場合（たとえば、右側に2つ、左側に1つ）：

<div class="modal-footer justify-content-between">                    
   <button type="submit" class="btn btn-danger">Delete</button>                                    
   <div>
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="submit" class="btn btn-primary">Save changes</button>
   </div>  
</div>
0
MikeBeaudin87

これはシンプルで助けてくれました

 <div class="modal-footer">
 <button id="pagePrintBtn" type="button" class="btn btn-primary" style= "float: left;">Print</button>
 </div>
0
KimboSlice