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中正常工作。您可以尝试将类添加到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;
}

Answer 2

扩展已接受的答案，以通过将一个类应用于外部模式div来在本地应用此答案，您需要在组件上使用modal-class属性，而不是像通常那样给它一个类。 / p>

https://bootstrap-vue.org/docs/components/modal#variants

JS：

<b-modal modal-class="modal-fullscreen">
    ...
</b-modal>

CSS：

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

Answer 3

如果您不想更改CSS，则只需在.modal-xl旁边添加.modal-dialog。

例如：

<div class="modal-dialog modal-xl" role="document">

如何制作模态全屏？

3 个答案: