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

Question

正如您从我的屏幕截图中看到的那样，我正在尝试水平对齐“添加到卡片”按钮。我已将文件缩小到 "New_grid.phtml"，但我不确定从哪里开始实际对齐它们！

我认为这是 div 需要对齐的 "new_grid.phtml"

                                    <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;
}

在此处使用您的姓名 class 而不是 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%;
}

如果你不想破坏响应

Answer 4

我最终让包含文本的块具有最小高度，只要我们的标题不要太长，这就解决了问题！这是添加到 new_grid.phtml

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

Magento 2 aligning add to car buttons on new_grid.phtml

html

css

php

magento2