web-dev-qa-db-fra.com

Boutons gauche et droite du bas de page modal dans Bootstrap 4

Bootstrap 4 utilise flex-box pour ses bas de page modaux. Si je veux deux boutons, un à gauche et un à droite, comment puis-je le faire fonctionner correctement? 

Le code ci-dessous tente d'utiliser un div.row avec col-sm-6 mais ne fonctionne pas.

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

Maintenant que le modal-footer est "display: flex" dans Bootstrap 4, il serait plus simple d'utiliser les marges automatiques. Utilisez mr-auto sur le bouton de gauche.

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

Démo

Voir aussi: Left align et right align dans div dans Bootstrap

68
Zim

Le modal-footer est display:flex;. La meilleure façon d’aligner ses éléments (par exemple, des boutons) consiste donc à utiliser des règles flexibles. Bootstrap 4 fournit de nouvelles classes d’utilitaires pour modifier ces règles de flexion (par exemple, .justify-content-[modifier] ). Donc, je pense qu'une meilleure option devrait être la suivante:

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

8
jmboiton

La seule façon de fonctionner dans IE est d'utiliser w-100. mx-auto et mr et ml-auto semblent tous déborder des boutons de l'élément conteneur.

<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>
4
Ryan M

Pour Bootstrap 4

Nous utilisons Spacing, Bootstrap inclut une large gamme de classes d’utilitaires de marge de réponse abrégées et complétées pour modifier l’apparence d’un élément. Les classes sont nommées en utilisant le format {propriété} {côtés} - {taille} pour xs et {propriété} {côtés} - {point d'arrêt} - {taille} pour sm, md, lg et xl.

plus d'infos ici: 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

Pour IE, vous pouvez utiliser .justify-content-between amorce de formulaire de classe de classe auxiliaire pour l'élément parent. Dans ce cas, pour le .modal-footer.

Par exemple:

<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

C'est simple et m'a aidé 

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