引导垂直对齐列内容与移动优化

Question

我正在工作的移动优化网站使用最新的启动网格系统。我希望在md和lg中相邻两列，但在xs和sm中垂直叠加。为了正确的布局，我也使用浮动左和右，如果顺序需要不同的时候，堆叠。最后，我希望在每一列中垂直地对内容进行居中。

除了引导之外，下面是我的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>

如果标记为垂直中心-md的列总是最小的，这是很好的。然而，我有一些情况，其中一列有一个响应图像，可以是更大或更小。因此，为了解决这个问题，我只需在两列中添加垂直中心md。应该起作用吗？不是的。

当两列都使用这种垂直对中实现时，行div将失去其自动高度，列div将转换为该行上方50%的位置。

问:如何使用引导网格系统实现响应列内容的垂直对中？

Answer 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中修复它。