Question

我使用的是Bootstrap v3.3.5。

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

我试过这个： .row {display：table; table-layout：fixed;} .col-lg-5 {display：table-cell;垂直对齐：中部;} 但它对我不起作用。

我也试过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>

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

也许它可以激发我们两个人的想法。

Bootstrap响应网格：第1列 - 顶部图像和文本垂直对齐中间，第2列 - 2个大图像

1 个答案: