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 模态水平的主要内容,如果未能解决你的问题,请参考以下文章