VueJS 2+Vue-Bootstrap：隐藏按钮仍保留卡片折叠触发区域

你可以通过两种方式实现隐藏按钮但保留卡片可点击区域的需求：

方法一：用空容器替代按钮 #

直接用一个空的<div>绑定折叠切换指令，配合stretched-link类，同时确保卡片父元素设置position-relative（Bootstrap内置类），这样整个卡片区域都会变成点击触发区：

<b-card 
  v-bind:img-src="`https://via.placeholder.com/200`"
  img-alt="Image" 
  img-top 
  tag="article" 
  style="max-width: 20rem;" 
  class="mb-2 position-relative"
>
  <!-- 空div绑定toggle指令，作为全屏点击触发区 -->
  <div v-b-toggle="'collapse-' + unique-identifier" class="stretched-link"></div>
  
  <b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
    <b-card>This is the collapsed content</b-card>
  </b-collapse>
</b-card>

方法二：隐藏按钮但保留其触发能力 #

保留b-button，通过Bootstrap的透明度类和定位类让按钮完全透明且占满卡片，既隐藏视觉元素又保留触发功能：

<b-card 
  v-bind:img-src="`https://via.placeholder.com/200`"
  img-alt="Image" 
  img-top 
  tag="article" 
  style="max-width: 20rem;" 
  class="mb-2 position-relative"
>
  <b-button 
    v-b-toggle="'collapse-' + unique-identifier" 
    variant="primary" 
    class="stretched-link opacity-0 position-absolute w-100 h-100 border-0 p-0"
  ></b-button>
  
  <b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
    <b-card>This is the collapsed content</b-card>
  </b-collapse>
</b-card>

关键说明 #

• position-relative必须加在卡片上，因为stretched-link依赖父元素的相对定位来实现全屏覆盖。
• 方法一中的空div没有任何视觉样式，完全不影响卡片原有布局；方法二中的按钮通过opacity-0透明化，w-100 h-100确保占满卡片区域，border-0 p-0去掉按钮默认的边框和内边距，避免残留布局影响。

内容的提问来源于stack exchange，提问作者Pierre Baudin