如何在现有按钮旁复制同款按钮并重新居中按钮组

问题根源 #

原代码使用Swiper组件时，容器max-width:250px仅能容纳单个按钮，且未配置Swiper横向多列布局参数，导致新增按钮自动换行；同时新按钮结构与原按钮不一致（多了"Join now"按钮），加重布局混乱。

修复步骤 #

1. 调整Swiper容器宽度与居中
   将Swiper容器的max-width修改为能容纳两个按钮的尺寸，并添加mx-auto类实现整体居中。

2. 配置Swiper横向多列布局
   在Swiper初始化代码中添加slidesPerView: 2（显示2个slide）和spaceBetween: 20（设置slide间距）。

3. 统一按钮结构
   移除新按钮中多余的"Join now"按钮，保持与原按钮结构完全一致。

修改后的完整代码 #

HTML部分

<div class="relative">
    <!-- Slider -->
    <div class="swiper !py-1 mx-auto" style="max-width: 550px;">
        <div class="swiper-wrapper">
            <!-- 原按钮Slide -->
            <div class="swiper-slide">
                <article>
                    <a href="javascript:void(0)" onclick="joinDiscord()" class="dark:bg-jacarta-700 dark:border-jacarta-700 border-jacarta-100 block rounded-[1.25rem] border bg-white p-[1.1875rem] transition-shadow hover:shadow-lg ">
                        <figure>
                            <img src="./img/discord.png" alt="Join Discord" width="100" height="100" class="w-full rounded-[0.625rem]" loading="lazy" />
                        </figure>
                        <div class="mt-4 flex items-center justify-between">
                            <span class="font-display text-jacarta-700 hover:text-accent text-base dark:text-white">Join us on discord </span>
                            <span class="dark:border-jacarta-600 border-jacarta-100 flex items-center whitespace-nowrap rounded-md border py-1 px-2">
                                <span data-tippy-content="Gems">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" fill="currentColor" class="bi bi-gem" viewBox="0 0 22 16">
                                        <path d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495 8 13.366l2.532-7.876-5.062.005zm-1.371-.999-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l5.113 6.817-2.192-6.82L1.5 5.5zm7.889 6.817 5.123-6.83-2.928.002-2.195 6.828z" />
                                    </svg>
                                </span>
                                <span class="text-green text-sm font-medium tracking-tight">+<?php echo getCodes()["RewardYFWz"]["Reward"]; ?></span>
                            </span>
                        </div>
                        <div class="mt-8 flex items-center justify-between">
                            <div class="flex items-center space-x-1">
                            </div>
                        </div>
                    </a>
                </article>
            </div>
            <!-- 新增的相同按钮Slide -->
            <div class="swiper-slide">
                <article>
                    <a href="javascript:void(0)" onclick="joinDiscord()" class="dark:bg-jacarta-700 dark:border-jacarta-700 border-jacarta-100 block rounded-[1.25rem] border bg-white p-[1.1875rem] transition-shadow hover:shadow-lg ">
                        <figure>
                            <img src="./img/discord.png" alt="Join Discord" width="100" height="100" class="w-full rounded-[0.625rem]" loading="lazy" />
                        </figure>
                        <div class="mt-4 flex items-center justify-between">
                            <span class="font-display text-jacarta-700 hover:text-accent text-base dark:text-white">Join us on discord </span>
                            <span class="dark:border-jacarta-600 border-jacarta-100 flex items-center whitespace-nowrap rounded-md border py-1 px-2">
                                <span data-tippy-content="Gems">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" fill="currentColor" class="bi bi-gem" viewBox="0 0 22 16">
                                        <path d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495 8 13.366l2.532-7.876-5.062.005zm-1.371-.999-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l5.113 6.817-2.192-6.82L1.5 5.5zm7.889 6.817 5.123-6.83-2.928.002-2.195 6.828z" />
                                    </svg>
                                </span>
                                <span class="text-green text-sm font-medium tracking-tight">+<?php echo getCodes()["RewardYFWz"]["Reward"]; ?></span>
                            </span>
                        </div>
                        <div class="mt-8 flex items-center justify-between">
                            <div class="flex items-center space-x-1">
                            </div>
                        </div>
                    </a>
                </article>
            </div>
        </div>
    </div>
</div>

Swiper初始化JS部分

// 确保页面加载完成后初始化Swiper
document.addEventListener('DOMContentLoaded', function() {
    new Swiper('.swiper', {
        slidesPerView: 2, // 一次显示2个slide
        spaceBetween: 20, // slide之间的间距
        // 其他原有配置...
    });
});

替代方案（无需Swiper滑动） #

如果不需要滑动功能，可直接替换Swiper结构为普通flex布局：

<div class="relative">
    <div class="!py-1 mx-auto flex flex-wrap justify-center gap-5" style="max-width: 550px;">
        <!-- 原按钮 -->
        <div class="w-[250px]">
            <!-- 按钮内容（与原代码一致） -->
        </div>
        <!-- 新增按钮 -->
        <div class="w-[250px]">
            <!-- 按钮内容（与原代码一致） -->
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Awesomeday46