Magento 2对齐添加到new_grid.phtml上的汽车按钮

Question

从屏幕截图中可以看到，我试图水平对齐“添加到卡片”按钮。 我已经将文件缩小到“ New_grid.phtml”，但是我不确定从实际对齐它们的地方开始！

我认为这是“ new_grid.phtml”中需要对齐的div

                                    <div class="product-item-actions">
                                        <?php if ($showCart): ?>
                                            <div class="actions-primary">
                                                <?php if ($_item->isSaleable()): ?>
                                                    <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                        <button class="action tocart primary"
                                                                data-mage-init='{"redirectUrl":{"url":"<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}'
                                                                type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php else: ?>
                                                        <?php
                                                            $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                                            $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                        ?>
                                                        <button class="action tocart primary"
                                                                data-post='<?= /* @escapeNotVerified */ $postData ?>'
                                                                type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <?php if ($_item->getIsSalable()): ?>
                                                        <div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
                                                    <?php else: ?>
                                                        <div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($showWishlist || $showCompare): ?>
                                            <div class="actions-secondary" data-role="add-to-links">
                                                <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
                                                    <a href="#"
                                                       data-post='<?= /* @escapeNotVerified */ $block->getAddToWishlistParams($_item) ?>'
                                                       class="action towishlist" data-action="add-to-wishlist"
                                                       title="<?= /* @escapeNotVerified */ __('Add to Wish List') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Wish List') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                                <?php if ($block->getAddToCompareUrl() && $showCompare): ?>
                                                    <?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
                                                    <a href="#" class="action tocompare"
                                                       data-post='<?= /* @escapeNotVerified */ $compareHelper->getPostDataParams($_item) ?>'
                                                       title="<?= /* @escapeNotVerified */ __('Add to Compare') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Compare') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>

Answer 1

希望在您的情况下，如果产品的完整名称过长，则不强制要求显示完整名称。如果是这样，则可以通过使用三个点CSS来缩短名称。并且您的对齐方式也可以。 ..而且这也将帮助您在产品详细信息页面和其他相关产品上获得成功。

三点CSS：

#content_right_head span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

在这里使用您的姓名类别代替id

只需根据需要更改宽度即可。

如果必须显示全名，则也要为您的姓名区域指定最小高度。希望这会有所帮助。 建议第一个。

Answer 2

如果您不想削减产品名称，可以使用flexbox 。 Magento lib /文件夹中的_utilities.less有一个完整的mixin，您可以在主题样式上重复使用。

使用该工具，元素将获得每一行的最高高度。 无需设置min-height ，这对于自适应流体网站而言并非最佳方案。

检查以下内容： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

你应该用

#content_right_head span{
    display:inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;

    max-width:180px;
    width: 100%;
}

如果您不想破坏响应式