twitter-bootstrap 在 Bootstrap 4 中左右对齐模态页脚按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43042262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left & right align modal footer buttons in Bootstrap 4
提问by Sean
Bootstrap 4 uses flex-box for it's modal footers. If I want two buttons, one on the left and one on the right, how do I get it to work properly?
Bootstrap 4 使用 flex-box 作为它的模态页脚。如果我想要两个按钮，一个在左边，一个在右边，我该如何让它正常工作？
The code below tries to use a div.rowwith col-sm-6but doesn't work.
下面的代码尝试使用div.rowwithcol-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">×</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>回答by Zim
Now that the modal-footeris "display:flex" in Bootstrap 4, it would be easiest to use the auto-margins. Use mr-autoon the left button.
现在modal-footerBootstrap 4中的is "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>
Also see: Left align and right align within div in Bootstrap
另请参阅：在 Bootstrap 中的 div 内左对齐和右对齐
Follow-up to comment "What if I need the button on the right to occupy all the space left?" - Use the btn-blockclass:
后续评论“如果我需要右边的按钮占据左边的所有空间怎么办？” - 使用btn-block类：
<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>
回答by jmboiton
The modal-footeris display:flex;. So the better way to align its elements (e.g. buttons) is by using flex rules. Bootstrap 4provides new utilities classes to modify those flex rules (e.g. .justify-content-[modifier]). So I think a better option should be as follows:
该modal-footer是display:flex;。因此，对齐其元素（例如按钮）的更好方法是使用 flex 规则。 Bootstrap 4提供了新的实用程序类来修改那些 flex 规则（例如.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">×</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>回答by Ryan M
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.
它在 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>
回答by MikeBeaudin87
For anyone that wants 3 buttons, for example 2 on the right and 1 on the left:
对于需要 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>
回答by Clark Marketing Communications
Totally agree with @Zim and @jmboiton
完全同意@Zim 和@jmboiton
If bothof these methods are used together, it fixes the issue for everyone (including IE users :P )
如果这两种方法一起使用，它会为每个人解决这个问题（包括 IE 用户：P）
Overall best solution is to combine .justify-content-betweenand the .mr-autoclasses like this:
总体上最好的解决方案是结合这样.justify-content-between的.mr-auto类：
<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">×</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>回答by Gonen09
For Bootstrap 4
对于 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.
我们使用 Spacing，Bootstrap 包括各种缩写和填充的响应边距实用程序类来修改元素的外观。类使用格式 {property}{sides}-{size} 命名为 xs，{property}{sides}-{breakpoint}-{size} 用于 sm、md、lg 和 xl。
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
更多信息：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>
回答by user9254092
<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>
回答by KimboSlice
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>
回答by Markus Krause
For IE you can use .justify-content-betweenhelper class form bootstrap for the parent element. In this case for the .modal-footer.
对于 IE，您可以.justify-content-between为父元素使用辅助类表单引导程序。在这种情况下，对于.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>
