無法集中網站中的內容

我是網站建設的新手，在下面的代碼中使用了一個預建的網站，它顯示了定價的四個部分，我想以集中的方式總共顯示三個部分，但是當我隱藏一個定價時，所有的定價都與左側對齊網頁的一側。

我應該如何解決？

還有什么需要分享的嗎？

<section id="pricing" class="pricing">
    <div class="container" data-aos="fade-up">
        <header class="section-header">
            <h2>Pricing</h2>
            <p>Check our Pricing</p>
        </header>

        <div class="row gy-4" data-aos="fade-left">

            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="500">
                <div class="box">
                    <h3 style="color: #000000;">Free Plan</h3>
                    <div class="price"><sup>$</sup>0<span> / mo</span></div>
                    <img src="assets/img/pricing-free.png" class="img-fluid" alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li class="na">Pharetra massa</li>
                        <li class="na">Massa ultricies mi</li>
                    </ul>
                    <!-- <a href="#" >Buy Now</a> -->
                </div>
            </div>

            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="200">
                <div class="box">
                    <span class="featured">Featured</span>
                    <h3 style="color: #000000;">Starter Plan</h3>
                    <div class="price"><sup>$</sup>19<span> / mo</span></div>
                    <img src="assets/img/pricing-starter.png" class="img-fluid" alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li>Pharetra massa</li>
                        <li class="na">Massa ultricies mi</li>
                    </ul>
                    <a href="#" class="btn-buy">Buy Now</a>
                </div>
            </div>

            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="300">
                <div class="box">
                    <h3 style="color: #000000;">Business Plan</h3>
                    <div class="price"><sup>$</sup>29<span> / mo</span></div>
                    <img src="assets/img/pricing-business.png" class="img-fluid" alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li>Pharetra massa</li>
                        <li>Massa ultricies mi</li>
                    </ul>
                    <a href="#" class="btn-buy">Buy Now</a>
                </div>
            </div>

            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="400">
                <div class="box">
                    <h3 style="color: #000000;">Ultimate Plan</h3>
                    <div class="price"><sup>$</sup>49<span> / mo</span></div>
                    <img src="assets/img/pricing-ultimate.png" class="img-fluid" alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li>Pharetra massa</li>
                        <li>Massa ultricies mi</li>
                    </ul>
                    <!-- <a href="#" >Buy Now</a> -->
                </div>
            </div>
        </div>
    </div>
</section>

uj5u.com熱心網友回復：

您正在使用引導類集。 vertical-align: inherit;">而是使用vertical-align: inherit;"> 并<div>使用“隱藏”類隱藏