如何解决留下 2 个定价表而不是 4 个并将它们居中?
对不起我的菜鸟,我在这个领域还很陌生!!
我有以下问题:
这里我有 4 个定价表:
但是当我删除 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。