时间戳

首页 > 解决方案 > vue bootstrap中的卡填充问题

html - vue bootstrap中的卡填充问题

问题描述

我一直在尝试使用 vue bootstrap 创建一个卡片组件，在这样做的同时我遇到了一个奇怪的问题，即卡片标题和正文周围有一个巨大的填充。如果我删除 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>

标签： htmlcsstwitter-bootstrapvue.jsbootstrap-4

解决方案

如果你想使用里面的子组件<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>

推荐阅读