使用 Bootstrap-Vue 时如何对齐卡片标题答案

【问题标题】：How to align card title when using Boostrap-Vue使用 Bootstrap-Vue 时如何对齐卡片标题
【发布时间】：2021-02-28 07:24:12
【问题描述】：

我正在使用 boostrap-vue 的 <b-card> 并遇到了一个问题，我似乎无法将标题道具居中对齐。有人知道这样做的好方法吗？下面是我卡片的内容，它有一个动态标题、img-src 和子文本（实际上是居中对齐的，与标题不同）：

    <b-card
      :title="obj.name"
      :img-src="mainImage()"
      img-alt="project info"
      img-top
      tag="article"
      style="max-width:30rem"
      bg-variant="dark"
      text-variant="white"
      class="mb-3 text-center"
    >
    <a class="subtext card-block stretched-link text-decoration-none" :href="endpoint()">
       {{ obj.subtext }}
    </a> 
    </b-card>

【问题讨论】：

text-center 应该根据文档工作，使用开发工具检查剩下的应用程序。虽然组件呈现为标准引导程序 cards dom，但您可能会添加更多行好吧，只需使用自己的代码（右键单击检查元素，复制/粘贴）与尝试解决组件实现

标签： html vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

在b-card 中使用b-card-title。

<b-card-title class="text-center">{{obj.name}}</b-card-title>

【讨论】：