Twitter bootstrap 左及右；引导4中的右对齐模式页脚按钮

Bootstrap4使用FlexBox作为其模式页脚。如果我想要两个按钮，一个在左边，一个在右边，我如何让它正常工作

下面的代码尝试将

div.row

与

col-sm-6

一起使用，但不起作用

启动演示模式
情态标题
&时代；
...
保存更改
接近

既然在Bootstrap 4中，

模式页脚是“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>

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


取消
拯救
这很简单，对我很有帮助

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


印刷品

印刷品
删除
拯救
模式页脚
是
显示：flex。因此，对齐其元素（例如按钮）的更好方法是使用flex规则bootstrap4提供了新的实用程序类来修改这些flex规则（例如）。因此，我认为更好的选择应该是：

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


保存更改
接近



启动演示模式
情态标题
&时代；
...
保存更改
接近
用于引导4

我们使用间隔，引导包括一系列缩写和填充的响应裕度实用程序类来修改元素的外观。类的命名使用了xs的{property}{sides}-{size}格式，sm、md、lg和xl的{property}{sides}-{breakpoint}-{size}格式

更多信息请点击此处：


羡慕
塞拉
对于IE，您可以使用
。在父元素的
助手类表单引导之间调整内容。在本例中，对于
.modal footer

例如：


保存更改
接近
对于想要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>


删除
接近
保存更改
完全同意@Zim和@jmboiton

如果这两种方法一起使用，它可以解决每个人的问题（包括IE用户：p）

总的来说，最好的解决方案是将
与
和
类结合起来，如下所示：

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


左键
接近
保存更改



启动演示模式
情态标题
&时代；
...
左键
接近
保存更改
这对我很有用



保存更改
接近
谢谢，太好了。最后一件事-如果在混合中抛出一个
字段集
，会发生什么？然后我会使用
w-100
使其全宽并向右浮动：太棒了！你是一个引导向导，非常感谢
mr auto
是解决方案。一个类的良好和简单的使用。谢谢如果我需要右边的按钮来占据左边的所有空间怎么办？如果问题还涉及到使用IE，这是一个比其他解决方案更好的解决方案。嗨，Emsea，欢迎使用SO。一般来说，在回答问题时，最好解释一下原因，而不是只给出一些代码（或者在本例中是减价），而不做任何解释。此外，当回答一个老问题时，如果你的答案被接受了，那么说明为什么你的答案突然变得相关总是好的，例如，如果你的答案现在被否决了，等等。
<!--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>

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

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