我正在尝试将 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 网格将其居中？
最佳答案
您有 4 个 col-md-4 div，需要对它们进行整理。您可以使用多种方法来解决该问题。
在这个可能解决方案的快速示例中，我删除了两个未使用的列作为您开始工作的起点。我还在父 div 中添加了一个 Bootstrap row 类，它也有一个 pricing-table 类，基本上这样您的代码也可以响应。 (您在顶部的 #rentals div 中使用了一个 row 类，但在下面的部分中没有这样做)
这里只是构建的示例:您可以将额外的内容添加到行中的第 3 个 col-md-4，或者如果您没有额外的内容，那么您可以切换到 col-md-6 列，以便两个 plan div 都在页面上居中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<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="row justify-content-center pricing-table mb-4"><!-- UPDATED -->
<!-- REMOVED <div class="col-md-4"> -->
<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>
<!-- REMOVED <div class="col-md-4"> -->
</div>
<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script></script>
</body>
</html>关于html - 居中 CSS Bootstrap 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59464831/