bootstrap 4模态 - 将模式内的按钮向左移动
问题描述:
我有一个模式,我在引导4中使用,但是我喜欢将'取消'和返回按钮移动到模态的左侧。我有一个工作js小提琴在这里:https://jsfiddle.net/andrewsolis/08v6znox/。这里也是我的html代码:bootstrap 4模态 - 将模式内的按钮向左移动
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">
<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>
的一般模式的文档提供here已经做什么,我需要它,它只是搞清楚如何使模态浮动左边是一个问题的按钮。我尝试将类pull-left
附加到按钮上,但没有运气。任何帮助将不胜感激。
谢谢。
答
您需要覆盖默认的Bootstrap css。
就在你的CSS补充一点:
.modal-footer {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
这里是更新jsfiddle。
您可以在这里阅读更多关于Bootstrap套件的响应式Flexbox实用程序https://v4-alpha.getbootstrap.com/utilities/flexbox/