Center Bootstrap 5 模态水平

Posted

技术标签:

【中文标题】Center Bootstrap 5 模态水平【英文标题】:Center Bootstrap 5 Modal horizontal 【发布时间】:2022-01-13 11:27:37 【问题描述】:

在我的 vue 应用程序中,Bootstrap 5 模式未在桌面水平居中。 这是我的组件:

Modal.vue

<template>
  <teleport to="#modal-container">
    <div
      ref="modalRef"
      class="modal fade"
      :id="`modal-$id`"
      tabindex="-1"
      :aria-labelledby="`modal-$id`"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div
          class="modal-content"
          :style="[noPadding &&  backgroundColor: 'transparent' ]"
        >
          <div v-if="!noHeader" class="modal-header">
            <slot name="header" />
          </div>
          <div class="modal-body" :style="[noPadding &&  padding: 0 ]">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import 
  defineComponent,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
 from "vue";
import  Modal  from "bootstrap";
import  onBeforeRouteLeave  from "vue-router";

export default defineComponent(
  name: "Modal",
  // modal states logic, no styles ....
);
</script>

<style lang="scss">
.modal-dialog 
  margin: 20px !important;

  .modal-header 
    font-weight: 500;
    font-size: 17px;
    border-bottom: none;
    color: $dark;
    padding-bottom: 0;
  

  .modal-content 
    border-radius: 10px;
  

</style>

我检查了检查元素,但没有找到方法。 html 结构是从 getbootstrap.com 复制的,并且在 mobile 中一切正常。

【问题讨论】:

【参考方案1】:

用这条线

margin: 20px !important;

您删除 auto 属性以使模式居中。

改用这个

margin: 20px auto !important;

【讨论】:

以上是关于Center Bootstrap 5 模态水平的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap模态框怎么从底部弹出

如何使 ngx-bootstrap 模态居中

bootstrap弹出的模态框水平垂直居中的实现

bootstrap 4 自动水平居中

如何通过javascript调用带有bootstrap 5的模态窗口?

Jquery / bootstrap模态在特定的角度5组件之上