我无法弄清楚我的问题在哪里。我正在尝试使用Card-columns作为Woocommerce类别页面。它格式正确，第一列链接工作，但第二，第三列等都失去了链接。我一直在寻找，但没有找到答案，说实话，我找不到任何有问题的人
环路start.php
<div class="container-fluid">
<div class="row mx-auto">
<div class="card-columns">
内容product_cat.php
<li <?php wc_product_cat_class( 'd-inline-block card', $category ); ?>>
<?php
/**
* woocommerce_before_subcategory hook.
*
* @hooked woocommerce_template_loop_category_link_open - 10
*/
do_action( 'woocommerce_before_subcategory', $category );
/**
* woocommerce_before_subcategory_title hook.
*
* @hooked woocommerce_subcategory_thumbnail - 10
*/
do_action( 'woocommerce_before_subcategory_title', $category );
/**
* woocommerce_shop_loop_subcategory_title hook.
*
* @hooked woocommerce_template_loop_category_title - 10
*/
do_action( 'woocommerce_shop_loop_subcategory_title', $category );
/**
* woocommerce_after_subcategory_title hook.
*/
do_action( 'woocommerce_after_subcategory_title', $category );
/**
* woocommerce_after_subcategory hook.
*
* @hooked woocommerce_template_loop_category_link_close - 10
*/
do_action( 'woocommerce_after_subcategory', $category ); ?>
我确实尝试将LI更改为DIV并且没有改变任何内容我在loop-end.php中确实有3个关闭div标签。同样，第一列工作正常，当它移动到第二列时会出现某种问题。
这是一个静态的例子。我已经发现Chrome出现了这个问题，它在Firefox和Edge中运行良好。它肯定是“卡片列”，如果我将其更改为卡片组或卡组，链接工作正常
<div class="container-fluid">
<div class="row mx-auto">
<ul class="card-columns">
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
<li class="d-inline-block card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#"><button class="btn btn primary"></button></a>
</li>
</ul>
</div>
答案 0 :(得分：1)
能够通过将卡包裹在另一个元素内来修复它。
为li元素提供了d-inline-block w-100个类，并用它来包装card。
<div class="row mx-auto">
<ul class="card-columns">
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
<li class="d-inline-block w-100">
<div class="card">
<h3 class="card-title">Card Stuff</h3>
<p class="card-text">Some description</p>
<a href="#">
<button class="btn btn primary"></button>
</a>
</div>
</li>
</ul>
</div>