引导程序4中的左右对齐模式页脚按钮

小开

最佳答案

Now that the modal-footer is "display:flex" in Bootstrap 4, it would be easiest to use the auto-margins. Use mr-auto on the left button.

<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

Also see: Left align and right align within div in Bootstrap

Follow-up to comment "What if I need the button on the right to occupy all the space left?" - Use the btn-block class:

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

小开

The only way it works in IE is using w-100. mx-auto and mr and ml-auto all seems to overflow the buttons from the containing element.

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

小开

This is simple and helped me

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

小开

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

小开

The modal-footer is display:flex;. So the better way to align its elements (e.g. buttons) is by using flex rules. Bootstrap 4 provides new utilities classes to modify those flex rules (e.g. .justify-content-[modifier]). So I think a better option should be as follows:

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

小开

For Bootstrap 4

We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

more info here: 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>

小开

For IE you can use .justify-content-between helper class form bootstrap for the parent element. In this case for the .modal-footer.

For Example:

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

小开

For anyone that wants 3 buttons, for example 2 on the right and 1 on the left:

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

小开

Totally agree with @Zim and @jmboiton

If both of these methods are used together, it fixes the issue for everyone (including IE users :P )

Overall best solution is to combine .justify-content-between and the .mr-auto classes like this:

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

小开

This works for me

 <div class="modal-footer">
<button type="button" class="btn btn-primary d-flex flex-grow-1">Save changes</button>
<button type="button" class="btn btn-secondary d-flex flex-grow-1" data-dismiss="modal">Close</button>
</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>`.

you can create a div tag (<div class="col-md-12 text-right></div>) and put your button tags inside that div section.. This will center the buttons.. if you want to move the to any other position and css style float: left or right to a class in our new div tag.