多个行和列的Bootstrap 3垂直对齐

Question

我是Bootstrap的新手。我刚开始一个项目，并遇到了与Bootstrap的网格系统垂直对齐的挑战。希望这个专家社区能够提供一些帮助并提供解决方案。

为了更好地说明问题，我为每个lg，md，sm和xs场景拍摄了4个屏幕截图（链接在底部的链接）。我希望这些图片对你有意义。

问题是，虽然lg场景看起来很棒且一切都正确对齐，但随着视口的变化，2列的内容开始显示错位。

以下是HTML标记：

<div class="container">
        <div class="row row-centered">
            <div class="col-sm-6 col-md-6 col-lg-6">

                <div class="row row-centered">
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h2>HEADER NUMBER 1</h2>
                    </div>
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                        <div>
                            <p>Teaser number 1 - Lorem ipsum dolor sit, interdum consectetur elit. Donec interdum dapibus lectus rhoncus.</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading short</h4>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading longer</h4>
                    </div>
                </div>
                <div class="row row-centered">
                    <div class="col-lg-12">
                        <div>
                            <p>Link to detailed page 1</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-6 col-lg-6">

                <div class="row row-centered">
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h2>HEADER DIFFERENT LENGTH</h2>
                    </div>
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                        <div>
                            <p>Teaser number 2 - Lorem ipsum dolor sit amet. Donec interdum dapibus lectus eu rhoncus.</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading different</h4>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading 4</h4>
                    </div>
                </div>
                <div class="row row-centered">
                    <div class="col-lg-12">
                        <div>
                            <p>Link to detailed page number 2</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我还没有合并任何自定义CSS，除了.row-centered，这很简单：

.row-centered {
text-align:center;}

我该怎么做才能解决问题？非常感谢你！

以下是截图： Example

Answer 1

Topgun ，你好。让它与对方保持联系。
我的方法是在2个媒体断点处调整标题字体大小 你可以改变它以适合你的东西，我只是稍微小一些，以显示效果。
我也在断点处将高度值添加到您所拥有的主要文本部分 我在这里使用min-height而不是固定高度。因为当它们堆叠在小屏幕上时，文本需要有扩展空间。 你的代码丢失了额外的divs，似乎有很多隐藏的块填充程序。

我经历了这个并删除了很多只是为了将它拉回到此演示所需的内容中 浏览代码，看看差异。

我在此处添加了col-xs-12到你的img class 正如您现在看到的那样，当调整到小屏幕尺寸时，图像会变为全宽，并且不会向左移动，右侧有一个大空间。
要使文字居中，您只需在class的每个text-center中使用rows <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { padding-top: 50px; } .spacer { margin-top: 2%; margin-bottom: 2%; } @media(max-width:1200px) { .adjust-fontsize{ font-size:2em; font-weight: 700; font-weight: 600; } } @media(max-width:992px) { .adjust-fontsize{ font-size:1.0em; } .row-height{ min-height:70px; } } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container col-lg-12 spacer"></div> <div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center"> <div class="row col-lg-12"> <h2 class="adjust-fontsize">HEADER NUMBER 1</h2> </div> <div class="row col-lg-12 row-height"> <p>Teaser number 1 - Lorem ipsum dolor sit, interdum consectetur elit. Donec interdum dapibus lectus rhoncus. </p> </div> <div class="row col-lg-12"> <div class="col-xs-12 col-sm-6"> <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt=""> <h4>Sub-heading short</h4> </div> <div class="col-xs-12 col-sm-6"> <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt=""> <h4>Sub-heading longer</h4> </div> </div> <div class="row col-xs-12"> <p>Link to detailed page 1</p> </div> </div> <div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center"> <div class="row col-lg-12"> <h2 class="adjust-fontsize">HEADER DIFFERENT LENGTH</h2> </div> <div class="row col-xs-12 row-height"> <div class="col-xs-12"> <p>Teaser number 2 - Lorem ipsum dolor sit amet. <br>Donec interdum dapibus lectus eu rhoncus. </p> </div> </div> <div class="row col-lg-12"> <div class="col-xs-12 col-sm-6"> <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt=""> <h4>Sub-heading different</h4> </div> <div class="col-xs-12 col-sm-6"> <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt=""> <h4>Sub-heading 4</h4> </div> </div> <div class="row col-xs-12"> <p>Link to detailed page number 2</p> </div> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>一次。

希望这可以帮助您了解现在的样子。

以下是 Fiddle 。

＆＃13;

＆＃13;

Web deployment task failed. (Could not connect to the remote computer ("xxxxx.scm.azurewebsites.net") using the specified process ("Web Management Service") because the server did not respond. Make sure that the process ("Web Management Service") is started on the remote computer.  Learn more at: http://go.microsoft.com/fwlink/?LinkId=221672#ERROR_COULD_NOT_CONNECT_TO_REMOTESVC.)

＆＃13;

＆＃13;

＆＃13;