如何让带Cloudinary动态背景的卡片整区域可点击且保留列布局？

要实现整个卡片区域可点击且保留Bootstrap列布局，有两种简洁的实现方式：

方法一：将链接标签作为列容器（推荐，语义化+原生交互） #

直接把原来的div.col-md-6...替换成link_to标签，把布局类和卡片样式都应用到链接上，这样整个区域就是可点击的链接，同时完全保留Bootstrap的列布局：

<div class="row justify-content-center">
<% @works.each do |work| %>
    <%= link_to work_path(work), class: 'work-card col-md-6 col-sm-12 d-block', style: "background-image: url('<%= cl_image_path work.photo.key, height: 420, width: 420, crop: :fill %>')" do %>
      <h1><%= work.name %></h1>
    <% end %>
<% end %>
</div>

关键调整说明： #

• 给link_to添加d-block类：<a>默认是行内元素，Bootstrap的d-block会把它转为块级元素，确保col布局类能正常生效
• 把原div的work-card、col-md-6、col-sm-12类全部移到link_to上
• 背景图片样式直接应用到link_to标签，覆盖整个链接区域
• 修正路由：原代码works_path(@work)应为work_path(work)，对应单个作品的详情页路由，若确实需要跳转到索引页可忽略此修改

方法二：用JavaScript绑定点击事件（适合不能修改HTML结构的场景） #

如果不想改变外层容器的标签类型，可以给.work-card绑定点击事件，触发链接跳转：

先调整HTML结构，给链接添加隐藏类避免重复交互：

<div class="row justify-content-center">
<% @works.each do |work| %>
    <div class="work-card col-md-6 col-sm-12" style="background-image: url('<%= cl_image_path work.photo.key, height: 420, width: 420, crop: :fill %>')">
      <%= link_to work_path(work), class: 'work-card-link d-none' do %>
      <h1><%= work.name %></h1>
      <% end %>
    </div>
<% end %>
</div>

然后添加JavaScript：

document.querySelectorAll('.work-card').forEach(card => {
  card.addEventListener('click', function() {
    const link = this.querySelector('.work-card-link');
    link && (window.location.href = link.href);
  });
  card.style.cursor = 'pointer';
});

这种方法需要额外处理交互反馈，语义化不如方法一，优先推荐方法一。

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