Linke und rechte Ausrichtung der modalen Fußzeilentasten in Bootstrap 4

76

Bootstrap 4 verwendet Flex-Box für seine modalen Fußzeilen. Wenn ich zwei Tasten möchte, eine links und eine rechts, wie kann ich sie richtig einsetzen?

Der folgende Code versucht, ein div.rowmit zu verwenden col-sm-6, funktioniert jedoch nicht.

<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>
Erweitern Sie das Snippet

twitter-bootstrap bootstrap-4 twitter-bootstrap-4 Sean
quelle

Antworten:

166

Nun , da das modal-footerist „display: flex“ in Bootstrap 4, wäre es am einfachsten , die Auto-Margen zu nutzen. Verwenden Sie mr-autoauf der linken Taste.

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

Demo

Siehe auch: Linksausrichtung und Rechtsausrichtung innerhalb von div in Bootstrap

Follow-up zum Kommentar "Was ist, wenn ich die Schaltfläche rechts benötige, um den gesamten verbleibenden Platz einzunehmen?" - Verwenden Sie die btn-blockKlasse:

<div class="modal-footer">
     <button type="button" class="btn btn-primary text-nowrap">Save changes</button>
     <button type="button" class="btn btn-secondary btn-block ml-1" data-dismiss="modal">Close</button>
</div>
Zim
quelle
1
Danke, das ist großartig. Eine letzte Sache - was passiert, wenn ich einen fieldsetin die Mischung geworfen habe? codeply.com/go/5WyUT4VA4n
Sean
1
Dann würde ich das verwenden w-100, um es in voller Breite und rechts schwebend zu machen: codeply.com/go/Eu0O9Lev5p
Zim
4
Genial! Du bist ein Bootstrap-Assistent, vielen Dank!
Sean
1
mr-autoist die Lösung. Schöne und einfache Verwendung einer einzelnen Klasse. Vielen Dank!
Matt Komarnicki
Was ist, wenn ich den Knopf rechts brauche, um den gesamten verbleibenden Platz einzunehmen?
Andres SK
17

Das modal-footerist display:flex;. Der bessere Weg, um seine Elemente (z. B. Schaltflächen) auszurichten, ist die Verwendung von Flex-Regeln. Bootstrap 4 bietet neue Dienstprogrammklassen zum Ändern dieser Flex-Regeln (z .justify-content-[modifier]. B. ). Daher denke ich, dass eine bessere Option wie folgt sein sollte:

<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>
Erweitern Sie das Snippet

jmboiton
quelle
2
Wenn das Problem auch die Verwendung von IE umfasst, ist dies eine bessere Lösung als die anderen.
Cristiancajiaos
7

Die einzige Möglichkeit im IE ist die Verwendung von w-100. mx-auto und mr und ml-auto scheinen alle die Schaltflächen des enthaltenen Elements zu überlaufen.

<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>
Ryan M.
quelle
2

Für alle, die 3 Tasten wünschen, zum Beispiel 2 rechts und 1 links:

<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>
MikeBeaudin87
quelle
1 
  <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>
MT513
quelle
1

Für Bootstrap 4

Wir verwenden den Abstand. Bootstrap enthält eine Vielzahl von abgekürzten und aufgefüllten Dienstprogrammklassen für Antwortränder, um das Erscheinungsbild eines Elements zu ändern. Die Klassen werden im Format {Eigenschaft} {Seiten} - {Größe} für xs und {Eigenschaft} {Seiten} - {Haltepunkt} - {Größe} für sm, md, lg und xl benannt.

Weitere Informationen hier: 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>
Gonen09
quelle
1

Stimme voll und ganz @Zim und @jmboiton zu

Wenn beide Methoden zusammen verwendet werden, wird das Problem für alle behoben (einschließlich IE-Benutzer: P).

Die beste Lösung besteht darin, .justify-content-betweendie .mr-autoKlassen wie folgt zu kombinieren :

<div class="modal-footer justify-content-between">
  <button type="button" class="btn btn-secondary mr-auto" type="button">Left Button</button>
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</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-secondary mr-auto" type="button">Left Button</button>
          <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>
Erweitern Sie das Snippet

Clark Marketing Communications
quelle
0

Das ist einfach und hat mir geholfen 

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

Für IE können Sie das .justify-content-betweenBootstrap-Formular für die Hilfsklasse für das übergeordnete Element verwenden. In diesem Fall für die .modal-footer.

Zum Beispiel:

<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>
Markus Krause
quelle