карточка-столбцы убивает ссылки во втором столбце в Woocommerce

Question

Я не могу понять, где моя проблема. Я пытаюсь использовать карточки-столбцы для страниц категорий Woocommerce. Он правильно форматирует, и ссылки на первые столбцы работают, но ссылки на второй, третий и т. Д. Теряют свои ссылки. Я искал, но не нашел ответа, честно говоря, я не могу найти никого с проблемой

Loop-start.php

<div class="container-fluid">
    <div class="row mx-auto">
        <div class="card-columns">

Content-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, и это ничего не изменило, и у меня есть 3 тега close div в loop-end.php. Опять же, первый столбец работает нормально, возникает некоторая проблема при перемещении во второй столбец.

Вот статический пример. Я понял, что это проблема 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>

Answer 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>