居中CSS引导网格

Question

我正在尝试将HTML元素与Bootstrap网格居中，并且很难将其放置在所需的位置。这是我的代码：

                <div id="rentals" class="container pb-4">
                <div class="row pt-5 mt-5 mb-4">
                    <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorter">
                        <h2 class="font-weight-bold mb-1">Container Rentals</h2>
                        <p>Here are the containers we rent</p>
                    </div>
                </div>


                <div class="pricing-table mb-4">

                <div class="col-md-4"></div>

                    <div class="col-md-4">
                        <div class="plan">
                            <div class="plan-header">
                                <h3>Short Term (6-12 Months)</h3>
                            </div>
                            <div class="plan-price">
                                <span class="price"><span class="price-unit">$</span>99</span>
                                <label class="price-label">per month</label>
                                <label class="price-label">Minium 6 months contract upfront</label>
                                <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                            </div>
                            <div class="plan-features">
                                <ul>
                                    <li>20’ Standard Shipping Container</li>
                                    <li>One Trip Condition</li>
                                    <li>14 Gauge Steel Walls</li>
                                    <li>Wood Floors</li>
                                    <li>Lockable Cargo Double Doors</li>
                                </ul>
                            </div>
                            <div class="plan-footer">
                                <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-4">
                        <div class="plan">
                            <div class="plan-header">
                                <h3>Long Term (12+ Months)</h3>
                            </div>
                            <div class="plan-price">
                                <span class="price"><span class="price-unit">$</span>89</span>
                                <label class="price-label">per month</label>
                                <label class="price-label">Minium 12 months contract upfront</label>
                                <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                            </div>
                            <div class="plan-features">
                                <ul>
                                    <li>20’ Standard Shipping Container</li>
                                    <li>One Trip Condition</li>
                                    <li>14 Gauge Steel Walls</li>
                                    <li>Wood Floors</li>
                                    <li>Lockable Cargo Double Doors</li>
                                </ul>
                            </div>
                            <div class="plan-footer">
                                <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4"></div>


                </div>
            </div>

此代码使它看起来像这样：

如您所见，它位于右侧，第一个框完全在中心，但是第二个框不在中心。如何使用Bootstrap网格居中？

Answer 1

您必须remove再加上两个col-md-4。一个来自top，另一个来自bottom。只需在网格上方的这一行添加<div class="row justify-content-center">。您可以在下面给出的代码中看到它。Justify-content-center是bootstrap的默认类别。有关更多参考，请参见以下链接：enter link description here

<div id="rentals" class="container pb-4">
        <div class="row pt-5 mt-5 mb-4">
            <div class="col text-center appear-animation" data-appear-animation="fadeInUpShorter">
                <h2 class="font-weight-bold mb-1">Container Rentals</h2>
                <p>Here are the containers we rent</p>
            </div>
        </div>
        <div class="pricing-table mb-4">
            <div class="row justify-content-center">

                <div class="col-md-4">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>Short Term (6-12 Months)</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>99</span>
                            <label class="price-label">per month</label>
                            <label class="price-label">Minium 6 months contract upfront</label>
                            <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>20’ Standard Shipping Container</li>
                                <li>One Trip Condition</li>
                                <li>14 Gauge Steel Walls</li>
                                <li>Wood Floors</li>
                                <li>Lockable Cargo Double Doors</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>Long Term (12+ Months)</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>89</span>
                            <label class="price-label">per month</label>
                            <label class="price-label">Minium 12 months contract upfront</label>
                            <label class="price-label">Delivery cost additional (charged for round trip) upfront</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>20’ Standard Shipping Container</li>
                                <li>One Trip Condition</li>
                                <li>14 Gauge Steel Walls</li>
                                <li>Wood Floors</li>
                                <li>Lockable Cargo Double Doors</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#" class="btn btn-dark btn-modern btn-outline py-2 px-4">Apply Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>