Question

Bootstrap 4使用flex-box作为它的模态页脚。如果我想要两个按钮，一个在左边，一个在右边，我该如何让它正常工作？

以下代码尝试将div.row与col-sm-6一起使用但不起作用。

＆＃13;

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

＆＃13;

Answer 1

现在modal-footer是＆＃34;显示：flex＆＃34;在Bootstrap 4中，最简单的方法是使用自动边距。使用左侧按钮上的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>

Demo

另见：Left align and right align within div in Bootstrap

Answer 2

modal-footer是display: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>

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

对于Bootstrap 4

我们使用Spacing，Bootstrap包含各种缩写和填充响应边距实用程序类来修改元素的外观。这些类使用格式{property} {sides} - {size}为xs和{property} {sides} - {breakpoint} - {size}为sm，md，lg和xl命名。

此处有更多信息：https://getbootstrap.com/docs/4.1/utilities/spacing/

Traceback (most recent call last):
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/IPython/core/interactiveshell.py", line 2847, in run_code
    exec(code_obj, self.user_global_ns, self.user_ns)
  File "<ipython-input-3-cb35ea6d5d8b>", line 1, in <module>
    stations = Station.objects.add_nearest_neighbour()
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/manager.py", line 82, in manager_method
    return getattr(self.get_queryset(), name)(*args, **kwargs)
  File "/home/gbrown/Development/transit_bikeshare/apps/bikeshare/querysets.py", line 162, in add_nearest_neighbour
    subquery_with_distance = Station.objects.annotate(distance=Distance('location', OuterRef('location')) / 1000)
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/manager.py", line 82, in manager_method
    return getattr(self.get_queryset(), name)(*args, **kwargs)
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/query.py", line 997, in annotate
    clone.query.add_annotation(annotation, alias, is_summary=False)
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/sql/query.py", line 975, in add_annotation
    summarize=is_summary)
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/expressions.py", line 452, in resolve_expression
    c.lhs = c.lhs.resolve_expression(query, allow_joins, reuse, summarize, for_save)
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/contrib/gis/db/models/functions.py", line 58, in resolve_expression
    source_fields = res.get_source_fields()
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/expressions.py", line 349, in get_source_fields
    return [e._output_field_or_none for e in self.get_source_expressions()]
  File "/home/gbrown/Envs/bikeshare-dev/lib/python3.5/site-packages/django/db/models/expressions.py", line 349, in <listcomp>
    return [e._output_field_or_none for e in self.get_source_expressions()]
AttributeError: 'ResolvedOuterRef' object has no attribute '_output_field_or_none'

Answer 5

这很简单，帮助我

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

Answer 6

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

Answer 7

对于IE，您可以将.justify-content-between辅助类表单引导程序用作父元素。在这种情况下，.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>

Answer 8

对于任何想要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>

Answer 9

完全同意@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>

Answer 10

这对我有用

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

左和右在Bootstrap 4中右对齐模态页脚按钮

10 个答案: