twitter-bootstrap – Bootstrap 4中的左右对齐模态页脚按钮
发布时间:2020-12-18 00:14:49 所属栏目:安全 来源:网络整理
导读:Bootstrap 4使用flex-box作为模态页脚.如果我想要两个按钮,一个在左边,一个在右边,我该如何让它正常工作? 下面的代码尝试使用col.sm-6的div.row但不起作用. script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"/scriptscript src="https://cdnj
Bootstrap 4使用flex-box作为模态页脚.如果我想要两个按钮,一个在左边,一个在右边,我该如何让它正常工作?
下面的代码尝试使用col.sm-6的div.row但不起作用. <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> 解决方法
既然模态页脚在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> Demo 另见:Left align and right align within div in Bootstrap (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |