向Bootstrap全屏模式添加右/底边距

Question

在我的代码中，我希望Bootstrap模式为全屏显示，但周围有50px的空白。当前，模态具有顶部和左侧边距，但没有右侧和底部边距。

$('#exampleModal').modal('show')

.modal-dialog {
  min-width:100%;
  height: 100%;
  margin: 20px !important;
  padding: 0;
}

.modal-content {
  min-height: 100%;
}

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

<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">
      Content
    </div>
  </div>
</div>