堆栈内存溢出
  繁体   English   中英

居中 CSS Bootstrap 网格

[英]Centering CSS Bootstrap Grid

 原文  2019-12-24 06:40:53  9   3    html/ css/ bootstrap-4/ grid

问题描述

我试图将一个 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 网格将其居中？

3 个解决方案

解决方案1
 1 已采纳  2019-12-24 07:04:19

您有 4 x 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>

解决方案2
 0  2019-12-24 06:55:56

您必须remove额外的两个col-md-4 。 一个从top ，另一个从bottom 。 只需在网格上方添加<div class="row justify-content-center">这一行。 您可以在下面给出的代码中看到它。 Justify-content-center是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="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>

解决方案3
 0  2019-12-24 07:43:09

就是这个：

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>

  <div class="container" id="rentals">
    <div class="row">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-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-xs-4 col-sm-4 col-md-4 col-lg-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-xs-2 col-sm-2 col-md-2 col-lg-2">
        </div>
    </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

见： https : //jsfiddle.net/pjszxret/8/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在页面上居中引导网格 引导网格偏移未居中 在 CSS Grid 中居中正方形 CSS网格内容居中 在css网格中居中项目 在 CSS 网格中居中 CSS Grid 中的列居中 CSS-网格行居中 在CSS网格中居中图像 定心 CSS 网格元件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM