时间戳

首页 > 解决方案 > 如何在 Bootstrap-vue 中强制卡片宽度？

html - 如何在 Bootstrap-vue 中强制卡片宽度？

问题描述

如何为我的卡片设置特定宽度并使其响应。目前，即使在较小的设备上，此代码也可以将我的所有物品水平放置，从而缩小卡片的宽度。但是当我选择垂直显示项目时，宽度样式有效。如何设置特定宽度以使其响应并向下移动到另一行？

        <b-card
          v-for="project in projects"
          :key="project.id"
          :title="project.name"
          :img-src="project.image"
          tag="article"
          img-top
          class="font-1"
          style="width: 25rem"
        >
          <b-card-text>
            {{ project.description }}
          </b-card-text>

          <b-button size="sm" :href="project.live" variant="primary"
            >live</b-button
          >
          <b-button size="sm" :href="project.code" variant="primary"
            >code</b-button
          >
        </b-card>
      </b-card-group>

标签： htmlcssbootstrap-vue

解决方案

谢谢我已经修好了。原来 b-card-group 默认样式没有响应。将其替换为 div 行以设置多个项目的卡片宽度

推荐阅读