Css 当具有最小宽度时，响应mdl卡会被奇怪地分发

截图：

PHP/HTML

<?php do_action('woocommerce_before_shop_loop_item'); ?>

<a href="<?php the_permalink(); ?>">

    <?php do_action('woocommerce_before_shop_loop_item_title'); ?>

    <div class="mdl-card__title mdl-card--expand">
        <h3 class="mdl-card__title-text">

            <?php do_action('woocommerce_shop_loop_item_title'); ?>

        </h3>

    </div>
    <div class="mdl-card__supporting-text product-card-supporting-text">

        <?php do_action('woocommerce_after_shop_loop_item_title'); ?>

    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect product-card-button-left">
            Get a Quote
        </a>
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect product-card-button-right">
            Add to Cart
        </a>
    </div>
</a>

<?php do_action('woocommerce_after_shop_loop_item'); ?>

如果没有最小宽度，它可以正常工作，并且mdl卡可以正确分布。 但随后mdl卡变得非常纤细，在某些设备上看起来很奇怪

截图：

我该怎么做才能使它正常工作？

---

我希望分发mdl卡，以便所有行都被平均填充，并且mdl卡不会收缩和挤压

除非您对PHP->HTML或Sass->CSS编译有问题，否则只提供已编译的HTML/CSS。可能需要创建一个基本代码的plunkr（或类似代码），供人们查看和编辑。这有帮助吗？如果你从侧面缩小屏幕，你可以看到效果，除非你在PHP->HTML或Sass->CSS编译方面有问题，只提供编译后的HTML/CSS。也许可以创建一个基本代码的plunkr（或类似）供人们查看和编辑。这有帮助吗？如果你从侧面缩小屏幕，你可以看到效果

.mx-product-card {
  width: 270px;
  min-width: 270px;
  height: 480px;
}