引导响应网格:列1-图像在顶部，文本垂直对齐在中间，列2-2个大图像

Question

我使用的是Bootstrap v3.3.5。

我需要第一列与第二列相同的高度与标志在顶部和文本在中间。固定高度不是一个选项，因为我希望整个事情是响应性的。我也不想使用flex，因为IE支持的问题。

我试过了：.row {display: table；table-layout: fixed;} ..col lg-5 {display:table-cell；vertical align:middle；}，但对我不起作用。

我也尝试过javascript使第一列与第二列的高度相同，但在更宽的屏幕上会出现问题。

下面是我的html：

​

<article class="row">
    <div class="col-lg-5">
        <img class="img-responsive" src="img/uangel/uangellogo.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis sit amet lorem ut aliquet. In hac habitasse platea dictumst. Sed eu vulputate nunc. Aliquam ornare elit lorem, vel aliquam est malesuada sed. Praesent sagittis vitae ante a sollicitudin. Curabitur in dolor eu sem condimentum lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla fermentum ipsum nec odio pulvinar commodo.</p>  
    </div>
    <div class="col-lg-7"> 
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/interior-stairs.png">
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/sticky-notes.png">
    </div>
</article>

​

谢谢!

Answer 1

我正在等待我不久前问过的一个类似问题的答案：Bootstrap Vertically Align Column Content with Mobile Optimization。

我在这里可能有你的部分解决方案：

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

所以你的代码应该是这样的：

<article class="row vertical-container">
    <div class="col-lg-5 vertical-center">
        <img class="img-responsive" src="img/uangel/uangellogo.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis sit amet lorem ut aliquet. In hac habitasse platea dictumst. Sed eu vulputate nunc. Aliquam ornare elit lorem, vel aliquam est malesuada sed. Praesent sagittis vitae ante a sollicitudin. Curabitur in dolor eu sem condimentum lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla fermentum ipsum nec odio pulvinar commodo.</p>
    </div>
    <div class="col-lg-7"> 
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/interior-stairs.png">
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/sticky-notes.png">
    </div>
</article>

注意，这只适用于将垂直中心应用于最小的高度列(因此他们在我的帖子中提出了这个问题)。

也许它能激发我们两个的想法。