vue引导程序中的卡片填充问题

问题描述

我一直在尝试使用vue引导程序创建卡组件，与此同时，我遇到了一个奇怪的问题，即卡头和主体周围有很大的填充物。如果我删除b-card并将其留在b-card-header和b-card-body上，则它看起来像普通的引导卡，但现在页眉和主体周围没有空白。如果我希望标题和正文周围没有填充怎么办？

<b-card>
  <b-card-header v-b-modal.modalBox class="border-1">
    <div>
      <span>Header</span>
    </div>
  </b-card-header>
  <b-card-body>
    <div>
      Body text lorem ipsum
    </div>
  </b-card-body>
</b-card>

解决方法

如果要使用<b-card>和<b-card-header>之类的<b-card-img>内部的子组件，而这些子组件不依赖于它们周围的填充，则应应用no-body属性到<b-card>，这将删除卡上的默认填充，然后由子组件来控制它。

https://bootstrap-vue.org/docs/components/card#card-body

<b-card no-body>
  <b-card-header v-b-modal.modalBox class="border-1">
    <div>
      <span>Header</span>
    </div>
  </b-card-header>
  <b-card-body>
    <div>
      Body text lorem ipsum
    </div>
  </b-card-body>
</b-card>