BootstrapVue中模态(modal)提示框的title标题居中方法及示例代码

简介：

本文主要介绍BootstrapVue(Bootstrap和Vue)中，设置模态(modal)提示框组件的title标题居中的方法，以及相关的示例代码。

通常写法：

<div class="text-center"><b-modal visible centered id="send-pin-modal" header="test" title="cjavapy编程之路" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc><div class="col-12 text-center"></div><div class="col-12"><div class="ml-5 mr-5"><b-form-input type="password" id="pin-input" v-model="pin" required></b-form-input></div></div><div class="col-12 text-center"><slot name="pin-error" class="text-danger text-center" v-show="comment"></slot></div><div class="col-12"></div><div class="col-12 text-center"><b-button variant="primary" size="sm" class="mt-2 mr-2" @click="verifyPin">Continue</b-button><b-button variant="danger" size="sm" class="mt-2 ml-2" @click="hidePinModal">Cancel</b-button></div></b-modal></div>

**注意：**上面title是通过属性设置的，设置标题居中是不生效的。

设置模态(modal)提示框组件的title标题居中：

new Vue({el: '#my-app',data: {comment: 'Some comment',pin: '',}});

**注意：**该方法是将默认标题部分替换为自定义标题，并设置使用class="mx-auto"样式。

或者，可以header-class="justify-content-center"设置title居中，

例如，

new Vue({el: '#my-app',data: {comment: 'Some comment',pin: ''}});

了解更多分析及数据抓取可查看：

:8989/

特别说明：本文旨在技术交流，请勿将涉及的技术用于非法用途，否则一切后果自负。如果您觉得我们侵犯了您的合法权益，请联系我们予以处理。