无法集中网站内容

Question

我是网站建设的新手，在下面的代码中使用了一个预建网站，它显示了定价的四个部分，我想以集中的方式总共显示三个部分，但是当我隐藏一个定价时与网页左侧对齐。

我该如何解决？

还有什么需要分享的吗？

<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="#" class="btn-buy">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="#" class="btn-buy">Buy Now</a> -->
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

您正在使用 bootstrap classes 集。 class="col-lg-4 而不是使用 class="col-lg-3 并使用“隐藏”隐藏 <div> class class="col-lg-4 col-md-6 hide"

无法集中网站内容

Not able to centralize the content in website

html

css