bootstrap 4 modal - 将模态内的按钮移动到左侧

时间:2017-07-24 19:49:28

标签: html css bootstrap-modal bootstrap-4

我有一个我在bootstrap 4中使用的模态,但是我喜欢将'cancel'和返回按钮移动到模态的左侧。我有一个工作js小提琴:https://jsfiddle.net/andrewsolis/08v6znox/。这也是我的HTML代码:

<!-- 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">&times;</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附加到按钮上,但没有运气。任何帮助将不胜感激。

感谢。

2 个答案:

答案 0 :(得分:0)

您需要覆盖默认的Bootstrap css。

只需在你的css中添加:

.modal-footer {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

以下是更新后的jsfiddle

您可以在此处阅读有关Bootstrap响应式弹性箱实用程序套件的更多信息https://v4-alpha.getbootstrap.com/utilities/flexbox/

答案 1 :(得分:0)

不要覆盖 modal-footer 类,这也会影响所有其他模态。

您可以通过使用 Bootstrap 本身来简单地实现您想要的:

<div class="modal-footer d-flex justify-content-start">
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>

您可以在 documentation 中阅读有关 d-flex justify-content-start 的更多信息。