bootstrap 3模态页脚对齐两边的按钮

Question

如何在模态页脚中对齐按钮，使它们位于模态的两侧？默认行为将所有按钮设置在右边缘附近，但我需要右边的关闭按钮和左边的另一个按钮。

Answer 1

您可以将班级 pull-left 添加到要左对齐的按钮。

在下面的示例中， close 按钮将与 right 对齐，其他按钮与 left对齐

示例页脚代码：

<div class="modal-footer">
    <button type="button" class="btn btn-primary pull-left" style="">Save changes</button>
    <button type="button" class="btn btn-primary pull-left" style="">Save changes1</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

示例：

＆＃13;

＆＃13;

$(function () {
	$(".btn").click(function () {
		$("#myModal").modal('show');
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />


<!-- Button HTML (to Trigger Modal) -->
<a href="#" class="btn btn-lg btn-primary">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">Confirmation</h4>
			</div>
			<div class="modal-body">
				<p>Do you want to save changes you made to document before closing?
				</p>
				<p class="text-warning">
					<small>If you don't save, your changes will be lost.</small>
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary pull-left">Save changes</button>
				<button type="button" class="btn btn-primary pull-left">Save changes</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

与Phani的答案类似，但现在可视化并使用非内联CSS类。

＆＃13;

＆＃13;

 $('#myModal').modal('show');

＆＃13;

.modal .modal-footer button {
  float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;