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

标签 html css twitter-bootstrap

我是 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

最佳答案

壮志凌云，您好。为了让它们保持一致。
我的做法是在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>

enter image description here

关于html - Bootstrap 3 跨多行多列的垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31175932/

上一篇：javascript - 从左侧滑出时如何将 "slow effect"添加到我的幻灯片菜单？

下一篇：javascript - 如何在 Rails 中只使用相对路径，而不是使用 Assets 管道？

相关文章：

php - 使用 PHP/MySQL 的注册页面不将用户值存储到数据库

html - 中间有单词的水平线的CSS技巧

html - 如何覆盖导航栏中下拉菜单 anchor 标记的字体颜色？

javascript - 使用 Jquery 将视口(viewport)宽度大小应用于悬停时的 div

html - Bootstrap 自定义堆叠

javascript - 停用切换按钮

html - 在 bootstrap megamenu 中定位悬停子菜单

html - 如何在此特定标题上居中对齐 Logo

html - 用户如何从 "em"测量而不是 "px"中获益？

html - 希望文本叠加对其背景做出响应

©2024 IT工具网  联系我们