留下 2 个定价表而不是 4 个并将它们居中？

问题描述

对不起我的菜鸟，我在这个领域还很陌生！！

我有以下问题：

这里我有 4 个定价表：

4 pricing tables

但是当我删除 2 个定价表的代码以只在中间留下 2 个（它来自模板）时，它看起来很乱，看起来像这样： Looks like that

我想把它居中。 请问我该怎么办？

这是定价表的代码：

  <!-- Price Start -->
    <section class="section bg-light" id="price">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <div class="section-title">
                        <h4 class="title text-uppercase fw-normal mb-4">Our <span class="text-primary fw-bold">Pricing</span> </h4>
                        <p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
                    </div>
                </div><!--end col-->
            </div><!--end row-->

            <div class="row">
               
                
                <div class="col-lg-3 col-md-6 mt-4 pt-2">
                    <div class="pricing-table shadow rounded business-plan position-relative bg-white text-center">
                        <h5 class="pricing-plan rounded-top text-uppercase bg-primary text-light p-4 mb-0">Стандарт пакет</h5>
                        <div class="price-value p-4 text-center position-relative">
                            <div class="price-lable rounded-pill">
                                <h4 class="mt-4 d-block">€640</h4>
                            </div>
                        </div><!--end price value-->                             
                        <div class="pricing-features">
                            <ul class="list-unstyled mb-0">
                                <li>Консультация</li>
                                <li>Помощь в выборе вузов</li>
                                <li>Польский присяжный перевод на территории Польши</li>
                                <li>Онлайн регистрация</li>
                                <li>Переписка с вузами и уточнение всех вопросов</li>
                                <li>100% результат поступления</li>
                                <li>Поселение в подходящее для вас жилье</li>
                                <li>Консультация о финансах во время учебы</li>
                                
                            <div class="price-button p-4">
                                <!-- <a href="#" class="btn btn-primary rounded-pill">Buy Now</a>                                         -->
                            </div><!--end button-->
                        </div><!--end price features-->
                    </div><!--end table-->
                </div><!--end col-->
                
                <div class="col-lg-3 col-md-6 mt-4 pt-2">
                    <div class="pricing-table shadow rounded bg-white text-center">
                        <h5 class="pricing-plan rounded-top text-uppercase bg-light p-4 mb-0">Пакет VIP</h5>
                        <div class="price-value p-4 text-center position-relative">
                            <div class="price-lable rounded-pill">
                                <h4 class="mt-4 d-block">????</h4>
                            </div>
                        </div><!--end price value-->                            
                        <div class="pricing-features">
                            <ul class="list-unstyled mb-0">
                                <li>включает в себя пакет “Стандарт”е</li>
                                <li>Мы встретим вас в аэропорту или на вокзале</li>
                                <li>Поможем при поселении</li>
                                <li>составим для вас персональную ознакомительную Программу</li>
                                <li>Совершим визит в пункт обмена валюты;</li>
                                <li>Визит в торговый центр с целью осуществления бытовых и продуктовых покупок;</li>
                                <li>Ознакомим с правилами пользования общественным транспортом;</li>
                                <li>Сопроводим и познакомим с ВУЗом: визит в деканат,оформление студенческого билета,определение группы,получение плана занятий.</li>
                                <li>Открытие банковского счета (по желанию);</li>

                            
                           
            </div><!--end row-->
        </div><!--end container-->
    </section><!--end section-->
    <!-- Price End -->

我认为它是用 bootstrap 完成的，我不太擅长它，但我认为它可能在 bootstrap.min.css 中？

解决方法

尝试对当前列使用 class="mx-auto"。

例如，我在这里举了一张卡片的例子。

<div class="container">
<div class="row ">
   <div class="col-lg-3 mx-auto">
      <div class="card">
         <div class="card-header">Header</div>
         <div class="card-body">Content</div>
         <div class="card-footer">Footer</div>
      </div>
   </div>
</div>