html 如何在Bootstrap中将容器垂直居中?

 

问题描述:

我正在寻找一种将containerdiv 垂直居中放置jumbotron在页面中间的方法。

在.jumbotron必须适应于屏幕的整个高度和宽度。的.containerdiv有一个宽度1025px和应在该页面(垂直中心)的中间。

我希望此页面的大屏幕适应屏幕的高度和宽度,并且容器垂直于大屏幕垂直居中。我该如何实现?

.jumbotron {

  height:100%;

  width:100%;

}

.container {

  width:1025px;

}

.jumbotron .container {

  max-width: 100%;

}


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron">

    <div class="container text-center">

        <h1>The easiest and powerful way</h1>

        <div class="row">

            <div class="col-md-7">

                 <div class="top-bg"></div>

            </div>



            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">

                <ul class="top-features">

                    <li>

                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>

                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>

                    </li>

                    <li>

                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>

                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>

                    </li>

                    <li>

                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>

                        <p><strong>Check</strong><br>Constantly the status of your links.</p>

                    </li>

                    <li>

                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>

                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>

                    </li>

                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>

                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>

                </ul>

            </div>

        </div>

    </div>

</div>

我创建了一个名为functioncalling.php的页面,其中包含两个按钮 Submit 和 Insert。作为PHP的初学者,我想测试单击按钮时执行的功能。我希望输出出现在同一页面上。因此,我创建 ...