Bootstrap 垂直对齐列内容与移动优化答案

【问题标题】：Bootstrap Vertically Align Column Content with Mobile OptimizationBootstrap 垂直对齐列内容与移动优化
【发布时间】：2015-10-01 21:44:05
【问题描述】：

我正在使用最新的 Bootstrap 网格系统开发移动优化网站。我想要在 md 和 lg 中相邻的两列，但在 xs 和 sm 中垂直堆叠。对于正确的布局，如果堆叠时顺序需要不同，我也会使用左右浮动。最后，我想将每列中的内容垂直居中。

除了 bootstrap 之外，这是我的 css：

.left {
    float: left;
}
.right {
    float: right;
}
@media (min-width: 992px) {
    .vertical-container-md {
        position: relative;
    }
    .vertical-center-md {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .right.vertical-center-md {
        left: 50%;
    }
}

这是我的html：

<section class="container">
    <div class="row vertical-container-md">
        <div class="col-xs-12 col-sm-12 col-md-6 left vertical-center-md">
            <h1>Little Content</h1>
            <p>1234567890</p>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 right">
            <h1>Lots of Content</h1>
            <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
            <h2>Sub Title</h2>
            <input type="submit" value="Button" />
        </div>
    </div>
</section>

如果标记为vertical-center-md 的列总是最小的，这很好用。但是，在某些情况下，一列的响应图像可以更大或更小。所以要解决这个问题，我只需将 vertical-center-md 添加到两列。应该正常工作吗？没有。

当两列都使用这种垂直居中实现时，行 div 会失去其自动高度，并且列 div 会转换为高于行的 50%。

问题：如何使用引导网格系统实现响应式列内容的垂直居中？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

感谢 vertical-align with Bootstrap 3 的 zessx。我很高兴在坚持使用纯 CSS 的同时摆脱浮动、定位和转换。

.border {
    border: 1px solid black;
}
.vertical-middle {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

记得注释行内块元素之间的空格！

<section class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6 border vertical-middle">
            <h1>Little Content</h1>
            <p>1234567890 1234567890 1234567890</p>
        </div><!--

     --><div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6 border vertical-middle">
            <h1>Lots of Content</h1>
            <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p>
            <h2>Sub Title</h2>
            <input type="submit" value="Button" />
        </div>
    </div>
</section>

似乎每个人都对 Boostrap 网格系统有同样的抱怨，希望他们在 v4 中修复它。

【讨论】：