wordpress - card-columns 正在杀死 Woocommerce 第二列中的链接

Question

我无法弄清楚我的问题出在哪里。我正在尝试将卡片列用于 Woocommerce 类别页面。它格式正确，第一列链接有效，但第二、第三等都失去了链接。我一直在寻找但没有找到答案，老实说我找不到有问题的人

循环启动.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>

标签： wordpresswoocommercebootstrap-4

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>