bootstrap-4 - 如何制作模态全屏？

Question

我正在尝试制作一个 bootstrap vue 模态全屏。我应该覆盖哪些 css 类，我想在将使用此模式的组件中以范围样式执行此操作。

Answer 1

您要编辑 .modal-dialog并强制尺寸。

示例 CSS:

.modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
}

另外为了让这个在 vue.js 中工作。您可以尝试向 b-modal 添加一个类并尝试如下操作:

<div>
  <b-button v-b-modal.modal1>Launch demo modal</b-button>

  <!-- Modal Component -->
  <b-modal class="test-modal" id="modal1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

CSS:

.test-modal .modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    position: fixed;
    z-index: 100000;
}