Bootstrap 4中的左右对齐模式页脚按钮


76

Bootstrap 4将flex-box用于其模态页脚。如果我需要两个按钮,一个在左边,一个在右边,如何使其正常工作?

下面的代码尝试使用div.rowwith,col-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">&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>

Answers:


166

既然modal-footer在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>

演示版

另请参见:在Bootstrap中的div内左对齐和右对齐


跟进评论“如果我需要右边的按钮来占据所有剩余空间怎么办?” -使用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>

1
谢谢,太好了。最后一件事-如果我fieldset混了怎么办?codeply.com/go/5WyUT4VA4n
肖恩

1
然后,我将使用w-100使其全宽并向右浮动:codeply.com/go/Eu0O9Lev5p
Zim

4
太棒了!您是Bootstrap向导,非常感谢!
肖恩

1
mr-auto是解决方案。方便且易于使用的单个类。谢谢!
马特·科马尼克

如果我需要右边的按钮来占据剩余的所有空间怎么办?
安德列斯·SK

17

modal-footerdisplay:flex;。因此,对齐其元素(例如按钮)的更好方法是使用flex规则。 Bootstrap 4提供了新的实用程序类来修改这些弹性规则(例如.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">&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>


2
如果问题还涉及使用IE,则这是比其他方法更好的解决方案。
cristiancajiaos

7

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

2

对于需要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>

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>

1

对于Bootstrap 4

我们使用Spacing,Bootstrap包括各种缩写和填充的响应余量实用程序类,以修改元素的外观。对于xs,使用{property} {sides- {size}格式,对于sm,md,lg和xl,使用{property} {sides- {breakpoint}-{size}格式命名类。

此处提供更多信息: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

完全同意@Zim和@jmboiton

如果同时使用这两种方法,它将为所有人(包括IE用户:P)解决此问题。

总体上最好的解决方案是结合这样.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">&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>


0

这很简单,对我有帮助

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

0

对于IE,您可以.justify-content-between为父元素使用辅助类形式的bootstrap。在这种情况下.modal-footer

例如:

<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.