html - Bootstrap 3 跨多行多列的垂直对齐

Question

我是 Bootstrap 的新手。我刚开始一个元素，遇到了关于与 Bootstrap 的网格系统垂直对齐的挑战。希望这个专家社区能够阐明一些问题并协助解决问题。

为了更好地说明问题，我为 lg、md、sm 和 xs 场景分别截取了 4 张屏幕截图(链接附在底部)。我希望这些图像对您有意义。

问题是，虽然 lg 场景看起来不错并且所有内容都正确对齐，但随着视口(viewport)的变化，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>

除了 .row-centered 之外，我还没有合并任何自定义 CSS，就这么简单:

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

我应该怎么做才能解决这个问题？非常感谢!

截图如下: Example

Answer 1

壮志凌云，您好。为了让它们保持一致。
我的做法是在2个媒体断点处调整标题字体大小。
您可以根据自己的需要更改它，我在这里缩小了一点以显示效果。
我还在断点处将高度值添加到您也有的主文本部分。
我用了min-height这里而不是一个固定的高度。因为当它们堆叠在一个小屏幕上时，文本需要向下扩展的空间。您的代码丢失了额外的 divs并且看起来像很多隐藏的 block 填充器。

我经历了这个并删除了很多只是为了把它拉回这个演示只需要的东西。
浏览代码并查看差异。

我在这里还添加的是col-xs-12进入你的 img class .
正如您现在将看到的那样，当将尺寸缩小到小屏幕尺寸时，图像变为全宽并且不会留在左侧而右侧有较大空间。
要使文本居中，您只需要使用 class的 text-center在每个 2 rows 中一次.

希望这能让您开始了解您现在想要的外观。

这是 Fiddle 。

<!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>