vue bootstrap中的卡填充问题

Posted 2023-02-22

【中文标题】vue bootstrap中的卡填充问题

【英文标题】：card padding issue in vue bootstrap

【发布时间】：2020-12-26 17:28:09

【问题描述】：

我一直在尝试使用 vue bootstrap 创建卡片组件，但在此过程中我遇到了一个奇怪的问题，即卡片标题和主体周围有一个巨大的填充。如果我删除 b-card 并将其保留为 b-card-header 和 b-card-body 那么它看起来像普通的引导卡，但现在标题和正文周围没有边距。如果我希望 header 和 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>

【参考方案1】：

如果您想使用 <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>