bootstrapVue的b-modal中的标题对齐中心答案

【问题标题】：header align center in b-modal of bootstrapVuebootstrapVue的b-modal中的标题对齐中心
【发布时间】：2021-01-19 10:32:21
【问题描述】：

            <div class="text-center">
            <b-modal visible centered id="send-pin-modal" header="test" title="Confirm Approval" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc>
                <div class="col-12 text-center">
                    <!--<p class="col-12">After being approved, the disbursement cannot be undone.</p>-->
                </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">{{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>

这是我的 bootstrapVue 示例代码。我还附上了输出图像。

如何以“Confirm Approval”为中心？

【问题讨论】：

标签： bootstrap-vue

【解决方案1】：

替代使用标题槽。您可以使用header-class 属性，并添加justify-content-center 实用程序类，使标题居中。

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

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="my-app">
  <b-modal visible centered id="send-pin-modal" header="test" header-class="justify-content-center" title="Confirm Approval" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc>
    <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">{{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">Continue</b-button>
      <b-button variant="danger" size="sm" class="mt-2 ml-2">Cancel</b-button>
    </div>
  </b-modal>
</div>

【讨论】：

【解决方案2】：

您可以使用 slot api 将默认标题部分替换为您的自定义标题部分。

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

  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="my-app">
    <b-modal visible centered id="send-pin-modal" header="test" title="Confirm Approval" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc>
        <template #modal-header>
         <div class="mx-auto">
          <h5>Confirm Approval</h5>
         </div>
        </template>
        
        <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">{{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">Continue</b-button>
            <b-button  variant="danger" size="sm" class="mt-2 ml-2">Cancel</b-button>
        </div>
    </b-modal>
</div>

【讨论】：

【解决方案3】：

你试过class="mx-auto"吗？
https://bootstrap-vue.org/docs/reference/spacing-classes#horizontal-centering

【讨论】：