Question

我的代码是这样的：

<div class="modal fade right" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-side modal-bottom-right">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </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>

演示和完整代码：https://codepen.io/trendingnews/pen/yLyVpOK

我添加了modal-side modal-bottom-right类，但是它不起作用。模式打开时，它不在右下角

我从这里获得了参考：https://mdbootstrap.com/docs/jquery/modals/basic/将类模式侧modal-bottom-right 我该如何解决这个问题？

Answer 1

您要链接的参考文献是针对material-design bootstrap的。不是twitter-bootstrap。 md-boostrap扩展了twitter-bootstrap的功能以使用material-design style guide。除了jQuery和bootstrap的CSS，JS外，您还需要同时链接md-bootstrap CSS和md-boostrap Javascript：

JavaScript CDN：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>

还有CSS CDN：

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">

Here是一个有效的示例。

为什么类模式侧modal-top-right-right无法在模式引导程序上工作？

1 个答案: